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

【问题标题】：Angular 2+ -- ng-repeat doesn't seem to work, but {{ var }} doesAngular 2+ -- ng-repeat 似乎不起作用，但 {{ var }} 可以
【发布时间】：2019-05-09 10:22:05
【问题描述】：

我正在尝试使用ng-repeat 循环一个JSON 对象，并使用this 作为参考。我目前拥有的是：

<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>

我在这里做错了什么？

【问题讨论】：

stackoverflow.com/questions/15127834/…的可能重复
@FrankModica 尝试了该问题的答案，但没有奏效。应该提到我尝试了问题中链接的 ngRepeat 参考资料中的所有方法。
即使你做{{ value.itemName }}也不行？
@FrankModica 正确。看到this comment，我可能只是将其重新设计为一个数组，并找出一种不同的方式来循环它。
无法复制。请给Minimal, Complete, and Verifiable example。

标签： angular

【解决方案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];
});

【讨论】：