迭代角度模板中的非空数组时出现空白结果

Question

编辑：我对推送方法进行了更改，但它仍然不起作用 我正在向 api 发出 get 请求并将每个响应推送到一个数组。该阵列在登录到控制台时可见。在打印模板中的数组长度时，长度为 5。但是当我尝试使用 ngFor 对其进行迭代时，没有显示输出

服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Quote} from 'src/app/models/quote';
@Injectable({
  providedIn: 'root'
})
export class StockpriceService {

  url1='https://financialmodelingprep.com/api/v3/quote-short/'; 
  url2='?apikey=efa24b272821b542c459557332c02a1e';
  

  constructor(private http:HttpClient) { 
  }

  //alpha apikey="VETRGM94G70WQGX9";


  getQuote(symbol:string) //load data from api
  {
      return this.http.get<Quote>(this.url1 + symbol + this.url2);
  }
}

ts 文件

import { Component, OnInit } from '@angular/core';
import{Quote} from 'src/app/models/quote';
import{StockpriceService} from 'src/app/services/stockprice.service';
import { timer } from 'rxjs';
@Component({
  selector: 'app-stocks',
  templateUrl: './stocks.component.html',
  styleUrls: ['./stocks.component.css']
})
export class StocksComponent implements OnInit {

  stocks: Array<Quote>=[];
  symbols=['AAPL', 'GOOG', 'FB', 'AMZN', 'TWTR'];
  constructor(private serv:StockpriceService) { }

  ngOnInit(): void {

    this.symbols.forEach(symbol => {

     this.serv.getQuote(symbol).subscribe(
        (data:Quote)=>{
          console.log(data);
          this.stocks.push(
            {
              symbol:data.symbol,
              price:data.price,
              volume:data.volume
            }
          );
  
        }
      )
      
    });

    console.log('stocks array is')
    console.log(this.stocks);
    
  }

}

模板

<div *ngFor="let stock of stocks">

              {{stock.symbol}}
              {{stock.price}}
 </div>

示例 api 响应

[ {
  "symbol" : "AAPL",
  "price" : 126.81380000,
  "volume" : 36245456
} ]

因此，我为它定义了一个接口

    export interface Quote{
    symbol:string;
    price:number;
    volume:number;
}

Answer 1

这会很好用。

this.serv.getQuote(symbol).subscribe((data: Quote[]) => {
     console.log(data);
     this.stocks.push(...data);
});