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

角模板支持安全导航算子、存在算子或零传播算子。假设您有组件类

  myObj:any = {
    doSomething: function () { console.log('doing something'); return 'doing something'; },
  };
  myArray:any;
  constructor() { }

  ngOnInit() {
    this.myArray = [this.myObj];
  }

您可以在模板html文件中使用它，如下所示：

<div>test-1: {{  myObj?.doSomething()}}</div>
<div>test-2: {{  myArray[0].doSomething()}}</div>
<div>test-3: {{  myArray[2]?.doSomething()}}</div>