这是关于我在工作中发现的一个有趣的问题。
如果你还不知道的话。我说的是Angular 2+
问题是
所以你想显示一个列表的标记,这个列表的值来自后端,出于某种原因,你得到的不是一个很好的对象数组,而是这样的东西。
{
"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.
你可以在后端修复它,这样你就得到了一个对象数组,但是没有人有时间去做这个。不要担心,孩子,我有我们。
9条答案
按热度按时间dphi5xsq1#
在Angular 6.1中引入了KeyValuePipe,允许您迭代对象属性:
文件:https://angular.io/api/common/KeyValuePipe
5ktev3wc2#
我不知道这是否安全,但对于这些简单的情况,我不喜欢管道解决方案,所以我通常用途:
在控制器中:
这是一个相当常见的情况,我不明白为什么没有一个标准的实现,如在Angular.js1.x中
x33g5p2x3#
更好的解决方案是使用如下管道:
然后在模板中:
91zkwejq4#
如果对象中有更多属性,可以像这样使用。
v2g6jxz65#
使用Object.values从对象中获取一个常规数组。Object.keys看起来是很多不必要的工作。
参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values
wbgh16ku6#
解决方案
在一个完美的世界里,你会得到一个对象数组,因为世界并不总是完美的。你要做的是,把所有的对象存储在一个数组里。这里是一个简单的解决方案,用普通的旧JavaScript。
**步骤1.**使用Object.keys获取所有对象键。此方法返回给定对象自己的可枚举属性的数组。
**第二步。**创建一个空数组。这是所有属性所在的地方,因为你的新ngFor循环将指向这个数组,我们必须捕获所有属性。
**第3步。**迭代抛出所有键,并将每个键推入您创建的数组中。
这是代码的样子。
然后,您可以将goodResponse赋给您最初试图迭代的class属性。
就这些了。
dced5bon7#
将数组声明为any,然后将对象
现在循环通过数据数组
dgiusagp8#
有两种方法:
1.如果对象项没有键
1.如果您的对象项具有键
管道
超文本标记语言
1bqhqjot9#
你可以试试这个:
欲了解更多信息,请访问:https://angular.io/api/common/KeyValuePipe