Angularでデータを待つ正しい方法は何ですか？

Question

私は、チェックボックスのリストを表示する子コンポーネントCheckboxListComponentを持っています。このリストには、Webサービスの呼び出しにより、ngOnInitに入力されます。

また、チェックする特定の項目を設定するための機能setEntryCheckedがあります。 が、データがある前にCheckboxListComponentが呼び出されると、呼び出しが失われたり、効果がありません。

私の解決方法は、結果がawait this.listSubject.first().toPromise()で利用可能になるまで待つことです。

TypeScriptでこれを行うより良い方法はありますか？

export class MainComponent { 
    @ViewChild('checkboxList') checkboxListComponent: CheckboxListComponent; 

    foo() { 
    this.checkboxListComponent.setEntryChecked(..., true); 
    } 
} 

export class CheckboxListComponent implements OnInit { 
    list: []; 

    private listSubject = new Subject<boolean>(); 

    async ngOnInit() { 
    try { 
     this.list = await this.dataService.get('url'); 
     this.listSubject.next(true); 
    } catch (err) { 
     this.listSubject.next(false); 
    } 

    this.listSubject = undefined; 
    } 

    async setEntryChecked(name: string, isChecked: boolean) { 
    // wait for the list to be initialized 
    if (this.listSubject) { 
     await this.listSubject.first().toPromise(); 
    } 

    // make the item checked 
    } 
} 

Answer 1

これは、さまざまな角度コーディングトリックよりも優れたデザインで対処する必要がある問題です。私は、親コンポーネントにデータを要求し、それを@Inputパラメータを介してCheckboxListComponentに供給することをお勧めします。したがって、CheckboxListComponentは、親がそれを必要とするとすぐに使用できる状態になります。

これは、アプリケーション全体で同じデータセットを提示するCheckboxListComponentコンポーネントのインスタンスが複数ある場合に特に当てはまります。