Angular 2：错误 - 找不到'object'类型的不同支持对象'[object Object]' . NgFor仅支持绑定到诸如Arrays之类的Iterables

我已经创建了一个角度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")
}}

这是我用过的界面

export interface IApp {
Data: {
    "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
},
StatusCode: string,
Message: string

}

并包含此HTML ...

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

组件如下......

export class AppComponent implements OnInit {

constructor(private _categotyService: CategotyService) {
}
errormessage: string;
  ngOnInit(){
    this._categotyService.getProducts().subscribe(res => this.Categories =   res, error => this.errormessage = <any>error, () => console.log('done'));
}
Categories: IApp[];

}

这是我从宁静的服务器上收到的json输出..

Data:"[{"Id":0,"CobjUId":"DD8F81350E38411A9DD4F344770734FF","Name":"Network","ShortCode":"Net","ObjectType":null,"ParentId":null,"OwnerId":null,"CreatedBy":null,"CreatedOn":null,"ModifiedBy":null,"ModifiedOn":null,"IsPublic":false,"IsDeleted":false,"Status":null,"Role":null},{"Id":0,"CobjUId":"81AB5E3E6BAE423ABE089CDF1BD17EEF","Name":"human resources","ShortCode":"hum","ObjectType":null,"ParentId":null,"OwnerId":null,"CreatedBy":null,"CreatedOn":null,"ModifiedBy":null,"ModifiedOn":null,"IsPublic":false,"IsDeleted":false,"Status":null,"Role":null},{"Id":0,"CobjUId":"CC381BF9082541F894B5030800D8665D","Name":"Finance","ShortCode":"Fin","ObjectType":null,"ParentId":null,"OwnerId":null,"CreatedBy":null,"CreatedOn":null,"ModifiedBy":null,"ModifiedOn":null,"IsPublic":false,"IsDeleted":false,"Status":null,"Role":null},{"Id":0,"CobjUId":"0139C0DDAE9D40E086B04E853FB0B885","Name":"Recruiting","ShortCode":"Rec","ObjectType":null,"ParentId":null,"OwnerId":null,"CreatedBy":null,"CreatedOn":null,"ModifiedBy":null,"ModifiedOn":null,"IsPublic":false,"IsDeleted":false,"Status":null,"Role":null}]",Message:"Successfully retrieved",StatusCode:"Success 200"

我试过把.Data添加到

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)

}

并将我的界面更改为

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 }

然后错误改为

找不到不同的支持对象'[{“Id”：0，“CobjUId”：“DD8F81350E38411A9DD4F344770734FF”，“名称”：“网络”，“ShortCode”：“Net”，“ObjectType”：null，“ParentId”：空， “OWNERID”：空， “CreatedBy”：空， “CreatedOn”：空， “ModifiedBy”：空， “ModifiedOn”：空， “IsPublic”：假的， “请将isDeleted”：假的， “状态”：空， “Role”：null}，{“Id”：0，“CobjUId”：“81AB5E3E6BAE423ABE089CDF1BD17EEF”，“Name”：“人力资源”，“ShortCode”：“hum”，“ObjectType”：null，“ParentId”：null “OWNERID”：空， “CreatedBy”：空， “CreatedOn”：空， “ModifiedBy”：空， “ModifiedOn”：空， “IsPublic”：假的， “请将isDeleted”：假的， “状态”：空”角色 “：空}，{” ID “：0，” CobjUId “：” CC381BF9082541F894B5030800D8665D “ ”姓名“： ”财经“， ”简码“： ”翅“， ”对象类型“：空 ”的ParentId“：空” OWNERID “：空，” CreatedBy “：空，” CreatedOn “：空，” ModifiedBy “：空，” ModifiedOn “：空，” IsPublic “：假的，” 请将isDeleted “：假的，” 状态 “：空，” 角色” ：空}，{ “ID”：0， “CobjUId”： “0139C0DDAE9D40E086B04E853FB0B885”， “姓名”： “招聘”， “简码”： “REC”， “对象类型”：空 “的ParentId”：空， “OWNERID” ：空，“C reatedBy“：null，”CreatedOn“：null，”ModifiedBy“：null，”ModifiedOn“：null，”IsPublic“：false，”IsDeleted“：false，”Status“：null，”Role“：null}]'of输入'string' . NgFor仅支持绑定到诸如Arrays之类的Iterables .

我觉得问题在于arrray开头的单引号 . 请给我任何方法，无论是使用管道还是任何其他格式来摆脱这个错误..........

Answer

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

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

最初我收到的json正在被字符串化，因此ngfor无法迭代它，所以我只是解析它并且它完美地工作 .