再度NgFor僅支持如數組

Question

由於很多我之前結合Iterables，我有這樣的錯誤：

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

我嘗試了許多解決方案，如： error display in *ngfor json array object

但沒有任何工程。

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 
    ); 
    } 
} 

當我改變了：

return body.data || {}; 

到：

return body.data.items || {}; 

我有錯誤：

Cannot read property 'items' of undefined 

ERR：無法讀取的不確定

Answer 1

基於評論，：Array[2] 0 : Object 1 Object client: "client1" countKO: 3 (...)你顯然不是在你的響應data對象，所以你應該只返回響應。是。

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

當你收到你的迴應，你只是想迭代該數組，並顯示你想要的屬性，所以是這樣的：

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

Answer 2

• 倒流性「數據」僅res.json() （爲什麼becasue有時如果數據不被取proerply比角將在這裏拋出錯誤）。

• 嘗試在HTML中使用elvis運算符（安全導航）。

當你CONSOLE.LOG您迴應試試這個代碼

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>