javascript - 如何在 Angular 中使用 ngFor 遍历对象属性

Question

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

如果你还不知道。我说的是 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.

您可能会在后端修复它，以便获得一组对象，但并不是没有人有时间这样做。 child ，别担心，我有我们。

Answer 1

在 Angular 6.1 中引入了 KeyValuePipe，它允许您迭代对象属性:

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

文档:https://angular.io/api/common/KeyValuePipe