这篇文章是关于我在工作中发现的一个有趣的问题。
如果你还不知道的话。我说的是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.
你可以在后端修复它,这样你就可以得到一个对象数组,但是没有人有时间这样做。别担心,孩子,我有我们呢。
发布于 2018-08-08 04:40:04
在Angular 6.1中引入了KeyValuePipe,它允许你迭代对象属性:
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>
发布于 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中没有这样的标准实现
发布于 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>
https://stackoverflow.com/questions/45819123
复制相似问题