Question

我正在尝试使用this作为参考，使用ng-repeat遍历JSON对象。我目前拥有的是：

<mat-card-content>
  <p>{{ selected.items }}</p>
  <p>{{ selected.items["0aa60412-a62b-4967-8c9e-b12764df6a9d"].itemName }}</p>
  <ul>
    <li ng-repeat="item in selected.items">{{ item.itemName }}</li>
  </ul>
</mat-card-content>

第二个<p>使用返回的第一个条目的硬编码ID

<p>标记有效，但是<li>无效，它只有一个没有内容的项目符号（对象有16个项目）。控制台显示错误TypeError: Cannot read property 'itemName' of undefined。

JSON对象的格式如下：

{
  "0aa60412-a62b-4967-8c9e-b12764df6a9d": { itemName: "value", [...] },
  [...]
}

其他失败的尝试包括：

<li ng-repeat="(key, value) in selected.items">{{ key }}</li>

我在这里做什么错了？

Answer 1

这似乎是我刚接触Angular的问题。基本上，ngRepeat是not recommended for this。此外，ng-repeat是AngularJS的功能，但不是Angular的功能，显然是different things。完全解决了这个问题。

由于您不能使用ng-repeat，因此可以将对象更改为数组并使用*ngFor，如下所示：

<li *ngFor="let item of selected.items">{{ item.itemName }}</li>

有关从对象到数组的转换，请参见this answer：

return Object.keys(retItems).map(function(idx) {
  return retItems[idx];
});

Angular 2+-ng-repeat似乎不起作用，但是{{var}}可以

1 个答案: