再度NgFor仅支持如数组

-1

由于很多我之前结合Iterables，我有这样的错误：再度NgFor仅支持如数组

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：无法读取的不确定

来源

2017-04-12 VANILKA

请张贴含有'你的HTML代码* ngFor' –

如果'body.data'没有'items'，它看起来与'* ngFor'没有关系。 –

你的JSON是怎样的？ – Alex

基于评论，：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>

来源

2017-04-12 07:32:17 Alex

它的作品，但你能解释我为什么。没有像在官方文档中那样工作？为什么数据不存在？在其他请求中（post for one item）它与body有关吗？ – VANILKA

您没有包含数组的对象'data'，在回应中你只是简单的一个数组。您的回复如下所示：'[{object1 content}，{object2 content}]'而不是这样：'{data：[{object1 content}，{object2 content}]}'。 – Alex

响应看起来像是什么时候，完全取决于你从后端发送的内容和结构:) – Alex

倒流性“数据”仅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>

来源

2017-04-12 06:10:37

在控制台日志中我看到“[Object，Object]”没有错误“，但元素没有显示在int视图中作为响应，我看到该列表正确地从其余api中获取 – VANILKA

试着在这里试一下'console.log（body，”GOOD “）;' –

数组[2] ：对象对象客户： “客户端1” countKO：3（...），所以其确定 – VANILKA

再度NgFor仅支持如数组

回答

相关问题