angular2:错误:TypeError:无法读取未定义的属性"..."

Question

我附上了我的angular2代码片的plunker.我想从我的JSON打印一个字段但是无法打印,因为最初我的Object是null并且它是通过Promise填充的.

这是我的组件文件

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 out因为我从Promise获取数据(即异步调用).

我可以初步了解的abc就是null,我的代码是无法找到abc.xyz.name.但我不想把任何if条件检查.因为我在JSON中有几个属性,如果条件,每个属性都不可能写入.

在angularjs 1中,如果abc为null,那么它将自动用空字符串替换它.我想在angular2中做同样的事情.请建议.

下面是plunker

https://plnkr.co/edit/u1NqNF0penz7OS55QmoU?p=preview

Answer 1

那是因为abc在模板渲染时未定义.?在HTTP调用完成之前,您可以使用安全导航operator()来"保护"模板:

{{abc?.xyz?.name}}

您可以在此处详细了解安全导航操作员.

更新:

安全导航操作符不能在数组中使用,您必须利用NgIf指令来克服此问题:

<div *ngIf="arr && arr.length > 0">
    {{arr[0].name}}
</div>

阅读更多关于NgIf指令的信息.