angular2：Error：TypeError：未定義のプロパティ '...'を読み取ることができません

Question

私はangular2のコードピースを貼り付けました。私は自分の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}}を削除しています。

プロミス（つまり、非同期呼び出し）から自分のデータが取得されているため、自分のコードでタイムアウトを使用しています。

私は最初にabcがnullであると理解することができます。私のコードはabc.xyz.nameを見つけることができません。しかし、私は条件を調べるために条件をつけたくない。私はJSONの中にいくつかのプロパティを持っているので、各プロパティが条件付きで書くことはできません。

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

は以下abcは、テンプレートのレンダリングの時点で定義されていないためだplunker

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

Answer 1

です。あなたは、HTTP呼び出しが完了するまで、テンプレートを「守る」ために安全なナビゲーション演算子（?）を使用することができます。

{{abc?.xyz?.name}} 

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

更新：

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

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

はNgIfディレクティブhereについては、こちらをご覧ください。

Answer 2

安全なナビゲーション演算子またはExistential OperatorまたはNull Propagation Operatorは、Angular Templateでサポートされています。

<div>test-1: {{ myObj?.doSomething()}}</div> 
<div>test-2: {{ myArray[0].doSomething()}}</div> 
<div>test-3: {{ myArray[2]?.doSomething()}}</div>