コンポーネントビューをレンダリングする前に非同期データが読み込まれるのを待つ

Question

asyncパイプで苦労しています。コンポーネントのビューをレンダリングしようとする前に、非同期データのロードが完了するまで待つ必要があります。

私はエルビス演算子は言及されているこの質問を見てみました

：角度の静止画がされていない不満エラーがスローされますので、私は{{model?['name']}}ようにそれを試してみましたが、何もしていないようだ

Wait for Angular 2 to load/resolve model before rendering view/template

nameのundefinedを読み取ることができます。

私はngOnInitにmodelを初期化しますが、データが（と思う）、この時点でのロードが完了していない：

ngOnInit() { 

    // If no model is set and the select shouldn't be allowed empty, set the model to the first option 
    if (!this.model && !this.allowEmpty) { 
    this.model = this.options[0]; 
    } 
    // If it should be allowed empty, set it to null which will add an empty class in the markup 
    else if (this.allowEmpty) { 
    this.model = null; 
    } 

    this.onModelChange.emit(this.model); 
} 

そして、それが途中でこのビットをレンダリングしようとします：

<div> 
    <ul> 
    <li> 
     <div>{{model?['name']}}</div> 
     <ul> 
     <li *ngFor="let option of options | async">{{option['name']}}</li> 
     </ul> 
    </li> 
    </ul> 
</div> 

ので、これを達成する正しい方法は何でしょうか？ビューをレンダリングする前に非同期データのロードが完了できるように、コンポーネントクラスに何かを設定できますか？

Answer 1

あなたは

{{option.name}} 

は常にoptionsがいない場合には何の<li ...がレンダリングされていないため、値を持っている

*ngFor="let option of options | async"> 

その後、optionで使用する場合は[]

で?を使用することはできませんまだ放出されたデータ。

{{option?.name}} 

は、有効な使用であり、あなたがやろうと思ったように行いますが、上記のように必要ではありません。