如何使用*ngFor迭代对象键
我想在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.
回答 10
Stack Overflow用户
发布于 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">Stack Overflow用户
发布于 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演示。
Stack Overflow用户
发布于 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
复制相似问题