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

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

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

阅读 663
1 个回答

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

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

data=myObj;

现在循环遍历数据数组

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题