如何在Angular 2中使用* ngFor迭代

我想在Angular 2中使用* ngFor迭代[object object]。

问题是对象不是对象的数组，而是包含更多对象的对象的对象。

{ <-- this is an array of object "data": { "id": 834, "first_name": "GS", "last_name": "Shahid", "phone": "03215110224", "role": null, "email": "[e-mail]", "picture": **{ <-- I want to get thumb: url but not able to fetch that** "url": null, "thumb": { "url": null } }, "address": "Nishtar Colony", "city_id": 2, "provider": "email", "uid": "[e-mail]" } } 

我知道我们可以使用pipe道迭代对象，但是我们如何从对象迭代到对象意味着data-> picture-> thum：url 。

Answer 1

您可以使用pipe道

 @Pipe({ name: 'keys', pure: false }) export class KeysPipe implements PipeTransform { transform(value: any, args: any[] = null): any { return Object.keys(value)//.map(key => value[key]); } } 

 <div *ngFor="let key of objs | keys"> 

另请参见如何使用* ngFor与对象？

Answer 2

您必须创build自定义pipe道。

 import { Injectable, Pipe } from '@angular/core'; @Pipe({ name: 'keyobject' }) @Injectable() export class Keyobject { transform(value, args:string[]):any { let keys = []; for (let key in value) { keys.push({key: key, value: value[key]}); } return keys; }} 

然后在你的* ngFor中使用它

 *ngFor="let item of data | keyobject" 

Answer 3

我认为最优雅的方法是使用JavaScript Object.keys，如下所示：

在组件传递对象到模板：

 Object = Object; 

然后在模板中：

 <div *ngFor="let key of Object.keys(objs)"> my key: {{key}} my object {{objs[key] | json}} <!-- hier I could use ngFor again with Object.keys(objs[key]) --> </div> 

Answer 4

如果你在你的响应中使用map()运算符，你可以链接一个toArray()运算符…然后你应该可以遍历新创build的数组…至less对我有用:)

Answer 5

我会这样做：

 <li *ngFor="let item of data" (click)='onclick(item)'>{{item.picture.url}}</li>