我想在Angular 2中使用*ngFor迭代object对象。
问题是对象不是对象的数组,而是包含更多对象的对象的对象。
{
"data": {
"id": 834,
"first_name": "GS",
"last_name": "Shahid",
"phone": "03215110224",
"role": null,
"email": "test@example.com",
"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": "test@example.com"
}
}
我知道我们可以使用管道来迭代对象,但是我们如何从一个对象迭代到另一个对象意味着data->picture->thum:url.
发布于 2016-12-30 20:50:21
Angular 6.0.0
https://github.com/angular/angular/blob/master/CHANGELOG.md#610-2018-07-25
介绍了一个KeyValuePipe
另请参阅https://angular.io/api/common/KeyValuePipe
@Component({选择器:‘键值-管道’,模板:
<span> <p>Object</p> <div \*ngFor="let item of object | keyvalue"> {{item.key}}:{{item.value}} </div> <p>Map</p> <div \*ngFor="let item of map | keyvalue"> {{item.key}}:{{item.value}} </div> </span>
})导出类KeyValuePipeComponent { object:{key: number: string} = {2:'foo',1:'bar'};map = new Map([2,'foo',1,'bar']);}
原始
你可以使用管道
@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">
发布于 2017-08-25 19:36:18
我认为最优雅的方式是像这样使用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>
如果你有很多的子对象,你应该创建一个组件来为你打印对象。通过打印你想要的值和键,并且在一个子对象上递归地调用它自己。
Hier你可以找到这两种方法的stackblitz演示。
发布于 2018-04-18 22:11:36
我知道这个问题已经回答了,但我有一个相同的解决方案。
您也可以在*ngFor
内部使用Object.keys()
来获得所需的结果。
我已经在上创建了一个演示。我希望这对你/其他人有帮助/指导。
代码片段
HTML代码
<div *ngFor="let key of Object.keys(myObj)">
<p>Key-> {{key}} and value is -> {{myObj[key]}}</p>
</div>
.ts文件代码
Object = Object;
myObj = {
"id": 834,
"first_name": "GS",
"last_name": "Shahid",
"phone": "1234567890",
"role": null,
"email": "test@example.com",
"picture": {
"url": null,
"thumb": {
"url": null
}
},
"address": "XYZ Colony",
"city_id": 2,
"provider": "email",
"uid": "test@example.com"
}
https://stackoverflow.com/questions/41396435
复制相似问题