Question

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

我在代码中使用了set time out，因为我从Promise获取数据（即异步调用）。

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

在angularjs 1中，如果abc为null，则会自动将其替换为空字符串。我想在angular2中做同样的事情。请建议。

以下是plunker

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

Answer 1

那是因为abc在模板渲染时未定义。您可以使用安全导航操作员（?）来保护＆＃34;模板，直到HTTP调用完成：

{{abc?.xyz?.name}}

您可以阅读有关安全导航操作符here的更多信息。

更新

安全导航操作符无法在数组中使用，您必须利用NgIf指令来克服此问题：

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

详细了解NgIf指令here。

Answer 2

Angular Template支持安全导航操作符或存在操作符或Null传播操作符。假设你有Component class

  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>

angular2：错误：TypeError：无法读取属性＆＃39; ...＆＃39;未定义的

2 个答案: