目前,我可以通过执行 {{ 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”来自“名称”值的数组组。
我实际上并不想要一个列表,我只是将它用作它工作的示例。
最佳答案
改变
<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>
关于javascript - Angular/HTML - 将显示完整的 JSON 但不能仅显示单个属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50138246/