javascript - Angular/HTML - 将显示完整的 JSON 但不能仅显示单个属性

Question

目前，我可以通过执行 {{ Groups | 来显示完整的 JSON 数组json }}.

它将在我的 html 页面上显示如下:

[ { "Id": 3, **"Name": "Name I"**, "Group_Name": "Group I" } ]

如果我这样做 {{ Groups.Name }} 我会收到以下错误:

ERROR TypeError: Cannot read property 'Name' of undefined
at Object.eval [as updateRenderer]

但是，如果我使用 *ngFor 在列表中显示它，它就完美无缺。

<select class="form-control">
<option *ngFor="let Group of Groups">{{ Groups.Name }}</option>
</select>

知道发生了什么事吗？此 JSON 只能有 1 条记录。如果我执行 {{ Groups[0].Name }}，数据将显示，但我收到以下错误。

ERROR TypeError: Cannot read property '0' of undefined
at Object.eval [as updateRenderer] (

我的目标是在我的 HTML 页面上显示“Name I”这个词。 “名称 I”来自“名称”值的数组组。

我实际上并不想要一个列表，我只是将它用作它工作的示例。

Answer 1

改变

<option *ngFor="let Group of Groups">{{ Groups.Name }}</option>

到

<option *ngFor="let Group of Groups">{{ Group.Name }}</option>

因为 Groups 是一个数组，您无法直接访问其上的任何属性。这就是为什么您会看到 Cannot read property 'Name' of undefined

此外，*ngFor="let Group of Groups" 您正在为 Groups 数组中的每个对象/元素进行迭代。这是如何工作的，简单来说，它一个一个地获取数组元素并将其分配给 Group，因此您必须访问它的属性。正如我上面提到的

 <option *ngFor="let Group of Groups">{{ Group.Name }}</option>