如何在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.

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

原文由 Jaime Rios 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将您的数组声明为任何，然后分配您的对象

data=[] as any;
myObj={};

data=myObj;

现在循环遍历数据数组

<tr *ngFor="let item of data">
<td>{{item.property}}</td>
</tr>

原文由 ilyas 发布，翻译遵循 CC BY-SA 4.0 许可协议