angular 2：错误：TypeError：无法读取属性‘…’未定义

Question

angular 2：错误：TypeError：无法读取属性‘…’未定义

我已经附上了我的角度2代码块的柱塞。我想从我的JSON中打印一个字段，但是无法打印，因为最初我的对象是NULL，并且它是通过承诺填充的。

这是我的组件文件

import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

class MyData {
  xyz : MySubData;
}

class MySubData {
  name : string;
} 
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      {{abc.xyz.name}}
    </div>
  `,
})
export class App implements OnInit {
  abc : MyData = null;
  constructor() {
    this.name = 'Angular2'
  }

  ngOnInit() {
    setTimeout(() => {
      this.abc = new MyData();
      this.abc.xyz = new MySubData();
      this.abc.xyz.name = "Binita";
    }, 2000);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

当我把线移开的时候{{abc.xyz.name}}从我的模板来看，它运行得很好。

我在代码中使用了SET TIME，因为我正在从诺言(即异步调用)中获取数据。

我最初能理解为abc是null，我的代码找不到abc.xyz.name。但我不想让任何条件检查。因为我在JSON中有几个属性，所以每个属性都不可能编写if条件。

在angularjs 1的前面，如果ABC为NULL，那么它将自动用空字符串替换它。我也想在英吉利里做同样的事情。请建议。

下面是柱塞

https：/plnkr.co/EDIT/u1NqNF0penz7OS55QmoU？P=预览

Answer 1

角模板支持安全导航算子、存在算子或零传播算子。假设您有组件类&nbsp;&nbsp;myObj:any&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;doSomething:&nbsp;function&nbsp;()&nbsp;{&nbsp;console.log('doing&nbsp;something');&nbsp;return&nbsp;'doing&nbsp;something';&nbsp;}, &nbsp;&nbsp;}; &nbsp;&nbsp;myArray:any; &nbsp;&nbsp;constructor()&nbsp;{&nbsp;} &nbsp;&nbsp;ngOnInit()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;this.myArray&nbsp;=&nbsp;[this.myObj]; &nbsp;&nbsp;}您可以在模板html文件中使用它，如下所示：<div>test-1:&nbsp;{{&nbsp;&nbsp;myObj?.doSomething()}}</div> <div>test-2:&nbsp;{{&nbsp;&nbsp;myArray[0].doSomething()}}</div> <div>test-3:&nbsp;{{&nbsp;&nbsp;myArray[2]?.doSomething()}}</div>