如何在Angular中使用ngFor循环遍历对象属性
如何在Angular中使用ngFor循环遍历对象属性
提问于 2017-08-22 21:32:57
这篇文章是关于我在工作中发现的一个有趣的问题。
如果你还不知道的话。我说的是Angular 2+
The problem
所以你想要显示一个列表的标记，这个列表的值来自后端，出于某种原因，你得到的不是一个很好的旧的对象数组，而是类似这样的东西。
{
"car" :
{
"color" : "red",
"model" : "2013"
},
"motorcycle":
{
"color" : "red",
"model" : "2016"
},
"bicycle":
{
"color" : "red",
"model" : "2011"
}
}然后，您尝试使用*ngFor，但出现了一条狂野的错误消息：
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.你可以在后端修复它，这样你就可以得到一个对象数组，但是没有人有时间这样做。别担心，孩子，我有我们呢。
回答 7
Stack Overflow用户
发布于 2018-08-08 04:40:04
在Angular 6.1中引入了KeyValuePipe，它允许你迭代对象属性：
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>Stack Overflow用户
发布于 2017-08-24 20:43:23
我不知道这是否安全，但对于这些简单的情况，我不喜欢管道解决方案，所以我通常使用：
<div *ngFor="let k of objectKeys(yourObject)">
{{yourObject[k].color}}
</div>在控制器中：
objectKeys(obj) {
return Object.keys(obj);
}这是非常常见的情况，我不明白为什么在Angular.js 1.x中没有这样的标准实现
Stack Overflow用户
发布于 2017-08-22 21:51:51
更好的解决方案是使用这样的管道：
import { Pipe, PipeTransform } from '@angular/core';
/**
* Convert Object to array of keys.
*/
@Pipe({
name: 'appProperties'
})
export class PropertiesPipe implements PipeTransform {
transform(value: {}): string[] {
if (!value) {
return [];
}
return Object.keys(value);
}
}然后在您的模板中：
<div *ngFor="let property of response | appProperties">
<div *ngFor="let item of response[property]">
{{item.something}}
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45819123
复制相关文章
相似问题