angular2:错误:TypeError:无法读取未定义的属性“…”

我已经附上了我的angular2代码块的重拳。 我想打印从我的JSON字段,但无法打印,因为最初我的对象为空,它正在通过承诺填充。

这是我的组件文件

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,因为我从Promise(即asynchronous调用)获取数据。

我最初可以理解为abcnull ,我的代码无法findabc.xyz.name。 但我不想把任何条件检查。 因为我有一个JSON内的几个属性,并且不可能为每个属性写条件。

在angularjs 1中,如果abc为空,那么它会自动replace为空string。 我想在angular2中做同样的事情。 请build议。

下面是强盗

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

这是因为abc在模板呈现的时刻是未定义的。 您可以使用安全的导航运算符( ? )来“保护”模板,直到HTTP呼叫完成:

 {{abc?.xyz?.name}} 

你可以在这里阅读更多关于安全的导航操作。

更新:

安全导航操作符不能在数组中使用,你将不得不利用NgIf指令来克服这个问题:

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

阅读更多关于NgIf指令。