動的なドロップダウン - AngularFire2

Question

私は（JSON相当）のようなコレクションを作成しました：

sports: { 
    football: { 
    name: 'football', 
    varieties: { 
     11aside: { 
     name: '11 a side' 
     }, 
     6aside: { 
     name: '6aside' 
     } 
    } 
    } 
} 

私はそうのような選択ボックスで様々なスポーツを表示することができます。

一度

// sports.controller.ts 
this.sports = db.collection('sports').valueChanges(); 

// sports.html 
<select formControlName="sport"> 
    <option value="">- Select -</option> 
    <option *ngFor="let sport of sports | async" [value]="sport.id">{{sport.name}}</option> 
</select> 

選択が行われ、2番目の選択ボックスが表示され、ユーザーに「多様性」を選択させたいと考えています。 anglefire2でこれを達成する最良の方法は何でしょうか？

ありがとうございました。

Answer 1

なぜこれが特にanglefire2に依存しなければならないのか分かりません。フォームの最初の選択ドロップダウンsportを空の文字列として初期化し、初期ロード時に有効なオプションであらかじめ選択されていないと仮定します。同様に、

this.form = this.formbuilder.group({ 
sport: '' 
}); 

テンプレートの値の変化を調べて、品種の対応するセカンダリドロップダウンを表示できます。

varieties: any[] = null; // declare varieties property in component 

this.form.get('sport').valueChanges 
    .subscribe((newVal) => { 
    if (!newval) { 
     this.varieties = null; 
    } else { 
     this.varieties = this.sports.filter((elem) => elem.id === newVal)[0].varieties; 
     // assuming each newVal is actually the property value of 'id' based on '[value]="sport.id"' <-- this assignment in the template 
    } 
    }); 

今すぐ簡単にこれを追加し、あなたが最初の選択コントロールの値の変更をリッスンコンポーネントでは、選択した値に基づいて、任意の所定の瞬間に品種の値を保持するために、「プロパティ」を持っていると仮定すると、同様にあなたのテンプレートに新しい選択のドロップダウン、

<select formControlName="sport"> 
    <option value="">- Select -</option> 
    <option *ngFor="let sport of sports | async" [value]="sport.id">{{sport.name}}</option> 
</select> 
<select *ngIf="varities"> 
    <option value="">- Select -</option> 
    <option *ngFor="let variety of varities" [value]="variety.name">{{variety.name}}</option> 
</select> 

あなたはこの新しい選択ドロップダウンのために割り当てられる実際のvalueに基づいてコードを変更する必要がある場合があり、さらには品種選択のための新しいformControlを追加することができます。それが役に立てば幸い。