"値はすぐに評価されました"のためにデータを取得できません。

Question

この問題の解決に時間を費やしましたが、何も役に立たなかった。私は私のプロバイダからのオブジェクトの配列を取得してい ：コンソールで

this.encarteProvider.getProdutosEncarte('encarte1').subscribe(prods => { 
    this.produtos = prods; 
    console.log(this.produtos); 
}); 

、それは示しています

[] 
0: Produto 
1: Produto 
2: Produto 
length: 3 
__proto__: Array(0) 

私はthis.produtos.forEach(produto => ...)をしようとする配列が空であるので、それは、私には何も表示されません。 。データは非同期的に取得され、（Chromeのコンソールのようにiアイコンをクリックすると）「値はただちに評価されました」が、なぜngForを使用して表示できますか、内部のデータは取得できません.tsファイル？

Answer 1

タイミングの問題です。ページが最初に表示されるとき、データはそこにないので、ngForは何もしません。後で、データが到着すると、Angular change detectionがデータを利用できるようになり、ngForを再実行して更新します。

forEachがコード内で実行される場所は表示されませんが、データが取得される前です。それが空である理由です。

このコードをsubscribeに移動してみてください。コードは、データが取得され後までは実行されません

this.encarteProvider.getProdutosEncarte('encarte1').subscribe(prods => { 
    this.produtos = prods; 
    console.log(this.produtos); 
    this.produtos.forEach(produto => ...); 
}); 

その方法。

私はこのような私のコードでそれを試してみました：

ngOnInit(): void { 
    this._productService.getProducts() 
      .subscribe(products => { 
       this.products = products; 
       this.products.forEach(product => console.log(JSON.stringify(product))); 
      }, 
       error => this.errorMessage = <any>error); 
}