Angular ，无法到达对象数组内容

Question

我想使用加密硬币 api，我从服务器获取数据到我的 "_coins:coin[]" 列表。我尝试了 "Console.log(_coins)" ，控制台显示了数组，我也可以在 html 页面上用 "*ngFor" 打开这个列表，但我无法打开。 ts 文件。

我在组件上试过了

public _coins:coin[]=[];
  constructor(private _coinrepo:CoinRepository) {
    this._coins=this._coinrepo.getMultiCoins(["BTC","ETH"]);
    console.log(this._coins);
   }

在控制台:

Array []​
0: Object { KEY: "BTC", BTC: 1, USD: 10018.38, … }
1: Object { KEY: "ETH", BTC: 0.02072, USD: 207.49, … }
length: 2
<prototype>: Array []

但我试过了

public _coins:coin[]=[];
  constructor(private _coinrepo:CoinRepository) {
    this._coins=this._coinrepo.getMultiCoins(["BTC","ETH"]);
    this._coins.forEach(i=>{
      console.log(i);
    });
   }

并且在控制台没有。我也试过 for loop、.find、.pop ... 没有用。我想获取如下数据:

for(let item of this._coins){
      _btc=item.BTC;
      _usd=item.USD;
    }

请帮帮我.. 代码在这里:https://stackblitz.com/edit/angular-ejrojd?embed=1

Answer 1

您不应从 this._coinrepo.getMultiCoins(["BTC","ETH"]) 返回数组 [或订阅服务]，而应返回一个可观察对象，然后在组件中订阅。因为 this.restService.getMultiCoin(c_list.toString()) 是一个不会立即返回的异步调用。像这样改变你的方法:

 getMultiCoins(c_list:string[]): Observable<coin[]>{
    return this.restService.getMultiCoin(c_list.toString())
        .pipe(
          map(apiRes => {

            for (let item in apiRes) {
               this.coins.push(
                { KEY: item, BTC: apiRes[item].BTC, USD: apiRes[item].USD, EUR: apiRes[item].EUR, TRY: apiRes[item].TRY }
            )
        }                
            return this.coins;
          })
        )
 }

现在在您的组件中订阅从 getMultiCoins API 返回的 Observable 以像这样打开 coins 数组:

public _coins:coin[]=[];
  constructor(private _coinrepo:CoinRepository) {
    this._coinrepo.getMultiCoins(["BTC","ETH"]).subscribe((coins) => {
      this._coins = coins;
        this._coins.forEach(i=>{
        console.log(i);
      });
     }
    );        
   }

希望对您有所帮助。