Angular2：错误：类型错误：无法读取未定义的属性'...'

Question

我已经附上了我的angular2代码片段的plunker链接。我想要打印JSON中的一个字段，但无法打印，因为最初我的对象是空的，并且通过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}}时，它可以正常运行。

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

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

早期在AngularJS 1中，如果abc为null，则会自动替换为空字符串。我想在Angular2中做同样的事情，请给建议。

下面是plunker

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

- Partha Sarathi Ghosh

Answer 1

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

{{abc?.xyz?.name}}

你可以在这里阅读有关安全导航运算符的更多信息。

更新：

安全导航运算符不能在数组中使用，你需要利用NgIf指令来解决这个问题：

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

在这里阅读有关NgIf指令的更多信息。

- Stefan Svrkota

Answer 2

在 Angular 中最好的方式是使用 resolver 守卫。这个守卫可以在渲染视图之前帮助你获取数据，而现在你先渲染数据再获取数据，这就是为什么会遇到这样的错误。我在 YouTube 上准备了一个视频，你可以从中获取想法。请查看 video。

- Ali Eshghi

Answer 3

安全导航操作符或存在性操作符或空值传播操作符在Angular模板中得到支持。假设您有组件类

  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>

- Jiping