javascript – 如何在Angular中使用ngFor循环对象属性

这篇文章是关于我在工作中发现的一个有趣问题.

如果你还不知道.我在谈论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.

你可能会在后端修复它,所以你得到了一个对象数组,但是没有时间没有时间.你不担心孩子,我有我们.

解决方法:

在Angular 6.1中引入了keyvaluePipe,它允许您迭代对象属性：

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

文件：https://angular.io/api/common/KeyValuePipe