Angular2 n - 無効な引数を取得しています[オブジェクトオブジェクト] ...パイプ 'AsyncPipe'

Question

サービスコールの結果を表示しようとしてエラーが発生しました。 htmlページにはngForがあります。非同期。私は呼び出しを行い、結果を得ることができますが、ページをレンダリングしようとするとエラーが発生します。私は変数が動作するために非同期のObservableである必要があることを知っています。私は何が間違っているのか分からず、いくつかのことを試みました。どんな洞察にも感謝します。

エラーメッセージ： 無効な引数「[オブジェクトのオブジェクト]、[オブジェクトのオブジェクト]、[オブジェクトのオブジェクト]、[オブジェクトのオブジェクト]、[オブジェクトのオブジェクト]、[オブジェクトのオブジェクト]、[オブジェクトのオブジェクト]、[オブジェクト「オブジェクト」、「オブジェクトオブジェクト」、「オブジェクトオブジェクト」、「オブジェクトオブジェクト」、「オブジェクトオブジェクト」、「オブジェクトオブジェクト」、「オブジェクトオブジェクト」、「オブジェクトオブジェクト」、「オブジェクトオブジェクト」、「オブジェクトオブジェクト]、「パイプの '[オブジェクトのオブジェクト]、[対象オブジェクト] AsyncPipe'

変数定義

public products:Observable<Product[]>; 

サービスへのコール

ngOnInit() { 

    this.productService.load().subscribe(
     data => { 
     // Set the products Array 
     this.products = data['_embedded'].products; 
     }, 
     error => console.log('Could not find product catalog.') 
    ); 

}

サービスコール

load() { 
    return this._http.get(`http://localhost:8000/products`).map(response => response.json()); 
    } 

HTML

<tbody *ngFor="let product of products | async"> 
      <tr> 
      <td>{{product.sku}}</td> 
      <td>{{product.materialNumber}}</td> 
      <td>{{product.price}}</td> 
      <td>{{product.baseUom}}</td> 
      <td>{{product.packageSize}}</td> 
      <td>{{product.casePack}}</td> 
      <td>{{product.weight}}</td> 
      <td>{{product.height}}</td> 
      </tr> 
      </tbody> 

データコールから

Answer 1

AsyncパイプはArrayいうしObservableを必要とします。あなたのケースでは

だけ asyncを削除しよう：

<tbody *ngFor="let product of products"> 

はまた、変数の定義を変更：

public products:Array<Product> = []; 

説明： array | asyncは、それ自体でsubscribeを行います。 これはすでにasyncのように動作します：

コード

this.productService.load().subscribe(
    data => { 
    // Set the products Array 
    this.products = data['_embedded'].products; 
    },... 

はObservable更新

Array of Productsに変換productsは空の配列であるため、ngForは実行されません。Observableが応答を取得し、productsにデータを移入すると、change detectionラウンドは（今の製品を投入する）場所を取り、再びngForを通過

私は（私が間違っている可能性）気づいたもう一つ奇妙なこと：

ngFor非常に以下のようなtrにする必要があります：

<tbody> 
    <tr *ngFor="let product of products | async"> 
    ... 
    </tr> 
</tbody> 

この場合は、あなたが複数の行があるでしょうし、ちょうど1 tbody