Угловая 2: Ошибка - Не удается найти отличающийся поддерживающий объект «Объект объекта» типа «объект». NgFor поддерживает только привязку к Iterables, например Arrays

Question

Я создал угловое приложение 2, которое вызывает успокоительный api и Когда я использую нижеследующий http get call в службе, я получаю сообщение об ошибке: «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" 

Я попытался addding .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", "Имя": "Сеть", "Сокращенный": "Чистый", "ObjectType": нулевая "ParentId": нулевой, "OwnerId": нулевой, "CreatedBy": нулевой, "CreatedOn": нулевой, "ModifiedBy": нулевой, "ModifiedOn": нулевой, "IsPublic" ложь "IsDeleted" ложь» Status ": null," Role ": null}, {" Id ": 0," CobjUId ":" 81AB5E3E6BAE423ABE089CDF1BD17EEF "," Name ":" human resources "," ShortCode ":" hum "," ObjectType ": null, "ParentId": нулевой, "OwnerId": нулевой, "CreatedBy": нулевой, "CreatedOn": нулевой, "ModifiedBy": нулевой, "ModifiedOn": нулевой, "IsPublic" ложь "IsDeleted" ложь "Статус ": нулевой," Роль ": нулевой}, {" Id ": 0," CobjUId ":" CC381BF9082541F894B5030800D8665D " "Имя": "Финансы", "Сокращенный": "Fin", "ObjectType": нулевой," ParentId ": нулевой," OwnerId ": нулевой," CreatedBy ": нулевой," CreatedOn ": нулевой," ModifiedBy ": нулевой," ModifiedOn ": нулевой," IsPublic "ложь" IsDeleted ": фал се, "Статус": нулевой, "Роль": нулевой}, { "Id": 0, "CobjUId": "0139C0DDAE9D40E086B04E853FB0B885", "Имя": "Рекрутинг", "Сокращенный": "Rec", "ObjectType": нуль "ParentId": нулевой, "OwnerId": нулевой, "CreatedBy": нулевой, "CreatedOn": нулевой, "ModifiedBy": нулевой, "ModifiedOn": нулевой, "IsPublic" ложь "IsDeleted": ложь, «Статус»: null, «Роль»: null}] 'типа' string '. NgFor поддерживает только привязку к Iterables, например массивы.

Я чувствовал, что проблема заключается в одиночной кассе, присутствующей в начале перевода. Пожалуйста, предоставьте мне какой-либо подход, следует ли использовать трубу или любой другой формат, чтобы избавиться от этой ошибки ..........

Ответ

Моя ошибка получил разрешаться вызова этого метода в методе отображения

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

Изначально JSON я получил в настоящее время строковой, поэтому ngfor не может перебирать, так что я он просто разбирал его, и он работал отлично.

Answer 1

* ngFor в шаблоне принимает массив Object

т.е. Категории Переменная содержит массив Object

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

Шаблон

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

Answer 2

U необходимо отобразить объект в массив, так что вы можете ngFor это или подходит для этого решения:

• access key and value of object using *ngFor