表示Angular4応答データのHttpClientから反復ngFor

Question

私は角4

から、このコードを持っていると私は、コンソール

で、この（Arrayオブジェクト）の応答を持っていると私がしたいですこのデータを*ngForで使用してこのオブジェクトを反復するには、どうしたらいいですか？ありがとう。

Answer 1

もしHttpClient.getため{observe: 'reaponse'}を使用するので、バック（ヘッダとボディの両方）完全な応答があるだろう、あなたは以下のようにパブリック変数としてそれをさらすことによってdata.bodyイテレータする*ngForを使用することができます。

data: any; 

this.http.get(..., {observe: 'response'}) 
    .subscribe(data => this.data = data.body); 

テンプレートのコードサンプル：

<div *ngFor="let item of data"> 
    {{item.address}} 
</div> 

---

HttpClient.getは、デフォルトで{observe: 'response'}なしで応答本体を返します。国民とデータを公開することなく、

<div *ngFor="let item of data"> 
    {{item.address}} 
</div> 

また

---

はあなたが購読してtemplateからの退会するasyncパイプを使用することができます。

data: any; 

this.http.get(...) // without observe: response 
    .subscribe(data => this.data = data); 

テンプレートのコードサンプル：あなたはまた、次のように{observe: 'response'}せずにそれを達成することができます変数：

data$: any; 

this.data$ = this.http.get(...) 
// or 
this.data$ = this.http.get(..., {observe: 'reaponse'}).map(data => data.body); 

テンプレートコードサンプル：

<div *ngFor="let item of data$ | async"> 
    {{item.address}} 
</div>