angular - one - two way data binding




angular2:錯誤:TypeError:無法讀取未定義的屬性“...” (2)

我附上了我的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獲取數據(即異步調用)。

我最初可以理解為 abcnull ,我的代碼無法找到abc.xyz.name。 但我不想把任何if條件檢查。 因為我在JSON中有幾個屬性,並且如果條件,每個屬性都不可能寫入。

在angularjs 1中,如果abc為null,那麼它將自動用空字符串替換它。 我想在angular2中做同樣的事情。 請建議。

下面是plunker

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


Angular Template支持安全導航操作符或存在操作符或Null傳播操作符。 假設您有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>

那是因為在模板渲染時 abc 未定義。 在HTTP調用完成之前,您可以使用安全導航操作符( ? )來“保護”模板:

{{abc?.xyz?.name}}

您可以 here 詳細了解安全導航操作員。

更新:

安全導航操作符不能在數組中使用,您必須利用 NgIf 指令來克服此問題:

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

here 閱讀有關 NgIf 指令的更多信息。







2-way-object-databinding