时间戳

首页 > 解决方案 > Angular 2+ - ng-repeat 似乎不起作用，但 {{ var }} 可以

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

问题描述

我正在尝试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>

我在这里做错了什么？

标签： angular

解决方案

这似乎是我刚接触 Angular 的一个问题。基本上ngRepeat不推荐这个。此外，ng-repeatAngularJS 的一个特性但不是 Angular，这显然是不同的东西。有了这个，就解决了。

由于您不能使用ng-repeat，因此另一种方法是将对象更改为数组并*ngFor像这样使用：

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

要从对象转换为数组，请参阅此答案：

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

推荐阅读