javascript - 如何在 Angular2 中显示对象内的对象属性

Question

我有一个名为 USAFacts 的对象，其中包含 StateName 等属性，以及 State-Bird 等对象，其中包含有关州鸟的属性。

在 JSON 中，USAFacts 的记录如下所示:

{"StateName": PA, "State-Bird": [ { "Name": Ruffed grouse, "YearDesignated": 1931, "ScientificName": "Bonasa umbellus"}]}

我可以使用

访问 Angular2 中的 StateName 属性

{{ USAFacts?.StateName }}

如何获取州鸟的名称？我尝试这样做:

{{USAFacts?.State-Bird.Name }}

但我在 Chrome 中收到错误，提示无法读取未定义“名称”的属性

Answer 1

不要在属性名称中使用特殊字符。

在 JSON 中将 State-Bird 替换为 StateBird

要访问 Name 属性，您需要首先访问数组 StateBird。

{{USAFacts?.StateBird[0].Name}}

但是，如果您想使用特殊字符，则可以使用括号表示法来访问该属性，而无需更改其名称

{{USAFacts?["State-Bird"][0].Name}}