affichage des données Réponse Angular4 De httpClient Iteration ngFor

Question

je ce code de angulaire 4

Et je cette (objets Array) réponse dans la console

Et je veux Pour utiliser ces données dans *ngFor pour itérer cet objet, comment puis-je l'obtenir? Merci.

Answer 1

Depuis que vous avez utilisé {observe: 'reaponse'} pour HttpClient.get, il y aura une réponse complète (à la fois en-tête et corps) en arrière, vous pouvez utiliser *ngFor à iterator data.body en l'exposant comme variable publique comme suit:

data: any; 

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

exemple de code modèle:

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

---

HttpClient.get retournera le corps de la réponse par défaut sans {observe: 'response'}. Vous pouvez également y parvenir sans {observe: 'response'} comme ci-dessous:

data: any; 

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

Code modèle exemple:

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

---

vous pouvez également utiliser un tuyau async pour vous abonner et vous désabonner de template sans exposer les données avec un public variable:

data$: any; 

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

Code du modèle échantillon:

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