Angular 角度2：错误-找不到不同的支持对象'；[对象对象]'；类型为'；对象'；。NgFor只支持绑定到数组之类的可重用文件

我创建了一个angular 2应用程序，它调用restful api和

---

当我在一个服务中使用下面的http get调用时，我得到一个错误，它说“NgFor只支持绑定到诸如数组之类的Iterables。”

这是我的服务

@Injectable()
export class CategotyService {
private url = "http://myapi:9510/api/Category/getcatlist";
private headers = new Headers({ 'Content-Type': 'application/json', 'Token': '26714A2385448406BD76070255BAE45A41E890AF51DA173AC347A37DFF61A3254CCBE1BCA66493908262261ACBC63CF99DA986E963021FD87AC86C7652E3C2029476CCF0BE548B1FF87FC955ECEA9EE325C535A7B4BF7408236E379850241306' });
constructor(private _http: Http) { }


getProducts(): Observable<IApp[]> {

    return this._http.get(this.url, { headers: this.headers }).map((response: Response) => <IApp[]>response.json()).do(data => console.log(data)).catch(this.handleError)
}

private handleError(error: Response) {
    console.log(error)
    return Observable.throw(error.json() || "server error")
}}

}

并包含此HTML

<ul>
  <li *ngFor="let Cat of Categories">
     {{Cat.Id}}
  </li>
</ul>

我已尝试将.数据添加到

    getProducts(): Observable<IApp[]> {

    return this._http.get(this.url, { headers: this.headers }).map((response: Response) => <IApp[]>response.json().Data).do(data => console.log(data)).catch(this.handleError)

}

然后错误变为

---

找不到不同的支持对象“[{“Id”：0，“CobjUId”：“DD8F81350E38411A9DD4F344770734FF”，“名称”：“网络”，“快捷码”：“网络”，“对象类型”：null，“父Id”：null，“所有者Id”：null，“CreatedBy”：null，“CreatedOn”：null，“ModifiedBy”：null，“ModifiedOn”：null，“IsPublic”：false，“IsDeleted”：false，“状态”：null，“角色”：null}，{“Id”：0，“CobjUId”：“81AB5E3E6BAE423ABE089CDF1BD17EEF”，“姓名”：“人力资源”，“快捷码”：“哼哼”，“对象类型”：null，“父Id”：null，“所有者Id”：null，“CreatedBy”：null，“CreatedOn”：null，“ModifiedBy”：null，“IsPublic”：false，“IsDeleted”：false，“状态”：null，“角色”：null}，{“Id”：0，“CobjUId”：“CC381BF9082541F894B530800D8665D”，“姓名”：“财务”，“快捷码”：“Fin”ObjectType:null，“ParentId:null”，OwnerId:null，“CreatedBy:null”，ModifiedBy:null，“ModifiedBy:null”，IsPublic:false，“IsDeleted:false”，Status:null，“Role:null}，{“Id:0”，CobjUId:“0139C0DDAE9D40E086B04E853FB0B885”，“Name:“Rec”，“ObjectType:null”，ParentId:null，“OwnerId:null”，CreatedBy:“CreatedOn”“字符串”类型的“：null，“ModifiedBy”：null，“ModifiedOn”：null，“IsPublic”：false，“IsDeleted”：false，“Status”：null，“Role”：null}]”。NgFor只支持绑定到数组之类的可重用文件

我觉得问题在于arrray开始时的单一报价。请提供任何方法，无论是使用管道还是任何其他格式来消除此错误

回答

通过在map方法中调用此方法解决了我的错误

 private extractData(res: Response) {
    let body = JSON.parse(res.json().Data);
    console.log(body);
    return body;
}

---

最初，我收到的json是字符串化的，所以ngfor无法迭代它，所以我刚刚对它进行了解析，它工作得很好。

*ngfor在模板中接受对象数组

i、 e Categories变量包含对象数组

 Categories = [
    {
    "Id": 1,
    "CobjUId": abc,
    "Name": mad
    },
    {
    "Id": 2,
    "CobjUId": cde,
    "Name": psd
    }
  ]

模板

<ul>
  <li *ngFor="let Cat of Categories">
     {{Cat.Id}}
  </li>
</ul>

{{Cat.Id}}

您需要将对象映射到一个数组，这样您就可以使用它或使用此解决方案：

---

NgFor仅支持绑定到阵列等可重用项。此错误表示它将接受数组。。试着简单点。声明一个变量，该变量包含数组和该变量上循环的简单模板

export interface IApp {
Id: number,
CobjUId: string,
Name: string,
ShortCode: string,
ObjectType: string,
ParentId: string,
OwnerId: string,
CreatedBy: string,
CreatedOn: Date,
ModifiedBy: string,
ModifiedOn: Date,
IsPublic: boolean,
IsDeleted: boolean,
Status: string,
Role: string }

 private extractData(res: Response) {
    let body = JSON.parse(res.json().Data);
    console.log(body);
    return body;
}

 Categories = [
    {
    "Id": 1,
    "CobjUId": abc,
    "Name": mad
    },
    {
    "Id": 2,
    "CobjUId": cde,
    "Name": psd
    }
  ]

<ul>
  <li *ngFor="let Cat of Categories">
     {{Cat.Id}}
  </li>
</ul>