错误类型：TypeError，无法读取未定义的属性'0' | Angular 4

Question

当我尝试从API获取JSON并打印其中的数据时，出现了以下错误。虽然可以正确打印数据，但此错误会在控制台上显示，我不知道如何修复。 HTML

{{datas[0].dimension}}

TS

datas: Data[];
this.abcService.getDatas().subscribe(datas => {
  this.datas = datas;
  console.log(datas);
});

从API获取的JSON（console.log）

(1) [{…}]
0:
  dimension:"bla bla bla"
__proto__:Object
length:1

控制台完整错误信息

ERROR TypeError: Cannot read property '0' of undefined
    at Object.eval [as updateRenderer] (GraphicsComponent.html:11)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13113)
    at checkAndUpdateView (core.es5.js:12260)
    at callViewAction (core.es5.js:12620)
    at execComponentViewsAction (core.es5.js:12552)
    at checkAndUpdateView (core.es5.js:12261)
    at callViewAction (core.es5.js:12620)
    at execEmbeddedViewsAction (core.es5.js:12578)
    at checkAndUpdateView (core.es5.js:12256)
    at callViewAction (core.es5.js:12620)

DebugContext_ {view: {…}, nodeIndex: 17, nodeDef: {…}, elDef: {…}, elView: {…}}
component: (...)
componentRenderElement:(...)
context:(...)
elDef:{index: 16, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, …}
elOrCompView:(...)
elView:{def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: GraphicsComponent, …}
injector:(...)
nodeDef:{index: 17, parent: {…}, renderParent: {…}, bindingIndex: 0, outputIndex: 0, …}
nodeIndex:17
providerTokens:(...)
references:(...)
renderNode:(...)
view:{def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: GraphicsComponent, …}
__proto__:Object

Obs: HTML会输出"bla bla bla"。

- Gustavo

Answer 1

应该是这样的

{{datas && datas[0]?.dimension}}

更多详情请参见此主题讨论：

• https://github.com/angular/angular/issues/6798

另一种解决方案是使用空数组初始化属性：

datas: Data[] = [];

然后只需写下

{{datas[0]?.dimension}}

- yurzui

Answer 2

在从异步调用获取响应时，请添加安全导航运算符以检查数据是否存在，然后再进行访问。

{{datas[0]?.dimension}}

- Sajeetharan

---

它不能这样。你重启并检查了吗？ - Sajeetharan

Answer 3

你会收到这个错误是因为在Angular编译HTML时，绑定数据为空，因为Observable.subscribe会在服务响应接收到数据之后才给你数据。

因此，你可以将其初始化以避免错误，或者首先进行未定义的测试，然后再使用它。

{{datas[0]?.dimension}}  //will work file

希望能有所帮助

- Aniruddha Das

---

在你之前1.5小时发布的两个答案已经覆盖了需要涵盖的内容。重复反复讲述是没有意义的。 - Louis

你之所以会遇到这个错误，是因为在 Angular 编译 HTML 时，你的视图绑定数据为空，而 Observable.subscribe 在服务响应接收到数据后才会提供数据，因此在编译时不可用。这一点在任何答案中都没有提到，这启发了我添加我的答案。 - Aniruddha Das

"你正在从异步调用中获取响应" 本质上是在说相同的事情。 - Louis

我认为我强调这一点是非常重要的。这个答案应该在这里，因为它突出了问题最重要的点，并将帮助很多人快速摆脱这种情况！ - Aniruddha Das