Angular 2+ -- ng-repeat似乎不起作用，但{{ var }} 确实有效

Question

我正试图使用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>

其中第二个CCD_ 2使用被返回的第一个条目的硬编码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。此外，ng-repeat是AngularJS的一个特征，但不是Angular的，这显然是不同的东西。解决这个问题。

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

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

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

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