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调用）获取数据。

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

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

下面是强盗

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

Answer 1

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

 {{abc?.xyz?.name}} 

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

更新：

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

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

阅读更多关于NgIf指令。