Une fois NgFor ne supporte que la liaison à Iterables tels que des tableaux

Question

Comme beaucoup d'autres avant moi, j'ai cette erreur:

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. 

je tentais de nombreuses solutions comme: error display in *ngfor json array object

Mais rien ne fonctionne.

public getInterfaces(): Observable<InterfaceBrief[]> { 
    let headers = this.createBasicHeaders(); 
    let options = new RequestOptions({ 
     method: 'get', 
     headers: headers}); 
    let url = this.restApi +"/dashboard/list"; 
    console.log(url); 
    return this.http.get(url, options) 
     .map(this.extractData) 
     .catch(this.handleError); 
    } 

---

private extractData(res: Response) { 

    let body = res.json(); 
    console.log("GOOD"); 
    return body.data || {}; 
    } 

---

export class DashboardComponent implements OnInit { 

    errorMessage: string; 
    interfacesBrief: InterfaceBrief[]; 

    constructor(private _service: AuthService, private _emotService: EmotClientService) { 
    } 
    ngOnInit() { 
    this.getInterfaces(); 
    } 
    getInterfaces() { 
    this._emotService.getInterfaces().subscribe(

     data => this.interfacesBrief = data, 
     error => this.errorMessage = <any>error 
    ); 
    } 
} 

Quand je changé:

return body.data || {}; 

à:

return body.data.items || {}; 

J'ai erreur:

Cannot read property 'items' of undefined 

ERR: Impossible de lire la propriété 'données' undefined

Answer 1

Sur la base de commentaires, lorsque vous CONSOLE.LOG votre réponse: Array[2] 0 : Object 1 Object client: "client1" countKO: 3 (...) vous clairement pas avoir un objet data dans votre réponse, donc vous devriez juste retourner la réponse que est.

private extractData(res: Response) { 
    let body = res.json(); 
    return body || []; // here! 
} 

Et quand vous avez reçu votre réponse, vous venez itérer ce tableau et d'afficher les propriétés que vous voulez, donc quelque chose comme ceci:

<div *ngFor='let item of interfacesBrief'> 
    {{item.client}} - {{item.countKO}} 
    <!-- print whatever else properties you have and want to display --> 
</div> 

Answer 2

• retour ne res.json() (pourquoi becasue parfois si les données ne sont pas proerply tiré par les cheveux que angulaire jetteront erreur ici). Essayez d'utiliser l'opérateur elvis (navigation sécurisée) dans le code HTML.

Essayez ce code

private extractData(res: Response) { 

    let body = res.json(); 
    console.log("GOOD"); 
    return body || {}; 
    } 

    export class DashboardComponent implements OnInit { 
    ............... 

    getInterfaces() { 
    this._emotService.getInterfaces().subscribe(

     data => { 
     this.interfacesBrief = data 
     console.log(this.interfacesBrief ,"Without Error") 
     }, 
     error => this.errorMessage = <any>error 
    ); 
    } 
} 

<div *ngFor='let items of interfacesBrief?.data?.items'> 
    {{items}} 
</div>