web-dev-qa-db-ja.com

angular2：エラー：TypeError：未定義のプロパティ「...」を読み取れません

Angular2コードピースのプランカーを取り付けました。 JSONからフィールドを印刷したいのですが、最初はオブジェクトが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条件を書き込むことができないためです。

Anglejs 1の以前では、abcがnullの場合、自動的に空の文字列に置き換えられました。 Angular2で同じことをしたいです。提案してください。

以下はプランカーです

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

angularangular2-template2-way-object-databinding
35
Partha Sarathi Ghosh

これは、テンプレートレンダリングの時点でabcが未定義であるためです。安全なナビゲーション演算子（?）を使用して、HTTP呼び出しが完了するまでテンプレートを「保護」できます。

{{abc?.xyz?.name}}

安全なナビゲーション演算子 here の詳細を読むことができます。

更新：

安全なナビゲーション演算子は配列では使用できません。この問題を克服するには、NgIfディレクティブを利用する必要があります。

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

NgIfディレクティブの詳細をお読みください こちら 。

96
Stefan Svrkota

Angularテンプレートでは、安全なナビゲーション演算子または実在演算子または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>
0
Jiping