angular2：错误：TypeError：无法读取未定义的属性“...”答案

【问题标题】：angular2: Error: TypeError: Cannot read property '...' of undefinedangular2：错误：TypeError：无法读取未定义的属性“...”
【发布时间】：2017-05-05 16:44:12
【问题描述】：

我已经附上了我的 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}} 行时，它运行良好。

我在我的代码中使用了设置超时，因为我从 Promise 获取数据（即异步调用）。

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

在 angularjs 1 的早期，如果 abc 为空，那么它会自动将其替换为空白字符串。我想在 angular2 中做同样的事情。请提出建议。

下面是小插曲

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

【问题讨论】：

标签： angular angular2-template 2-way-object-databinding

【解决方案1】：

Angular 模板支持安全导航运算符或存在运算符或空传播运算符。假设你有 Component 类

  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>

【讨论】：

【解决方案2】：

这是因为abc 在模板渲染时是未定义的。您可以使用安全导航运算符 (?) 来“保护”模板，直到 HTTP 调用完成：

{{abc?.xyz?.name}}

您可以阅读更多关于安全导航操作员here。

更新：

安全导航运算符不能用于数组，您必须利用NgIf 指令来解决这个问题：

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

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

【讨论】：

你拯救了我的一天！谢谢！
我一次又一次地犯这个错误，每次都回到相同的答案。