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（つまり非同期呼び出し）からデータを取得しているため、コードでset time outを使用しています。
最初はそのままabcで理解nullできますが、コードでabc.xyz.nameが見つかりません。しかし、if条件を確認したくないのですが。JSON内にいくつかのプロパティがあり、各プロパティがif条件を書き込むことができないためです。
angularjs 1の以前のバージョンでは、abcがnullの場合、自動的に空白文字列に置き換えられました。私はangular2で同じことをしたいです。提案してください。
以下はプランカーです
これabcは、テンプレートレンダリングの時点では未定義であるためです。安全なナビゲーション演算子（?）を使用して、HTTP呼び出しが完了するまでテンプレートを「保護」できます。
{{abc?.xyz?.name}}
安全な航法演算子について詳しくは、こちらをご覧ください。
更新：
安全なナビゲーションオペレーターは配列で使用できません。NgIfこの問題を解決するには、ディレクティブを利用する必要があります。
<div *ngIf="arr && arr.length > 0">
{{arr[0].name}}
</div>
NgIfディレクティブの詳細については、こちらをご覧ください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加