角2の反応式：値の変更に関する選択リストの更新

Question

ReactiveFormsを使用して作成された角2のフォームがあります。フォームには2つの選択要素が含まれています。最初のものには車両メイクのリストが含まれています。リストからmakeが選択されると、2番目のselect要素はそのmakeに属するモデルを表示する必要があります。

私はvalueChangesで遊んでいましたが、選択したmakeのモデルを含む2番目（子）のselect要素を取得できないようです。両方のフィールドが単純な入力要素である場合、valueChangesでの反応は実際にはモデル入力要素を更新します（モデルFormControlのsetValueを使用）。単純な入力フィールドについては、以下のコードサンプルを参照してください。

リアクティブフォームでもこれを実行できますか？

this.vehicleForm.controls['make'].valueChanges.subscribe((value) => { 
    console.log(value); 
    this.vehicleForm.controls['model'].setValue('Some Value'); 
}); 

この場合、 'value'は実際には選択されたmakeオブジェクトです。

Answer 1

あなたは、あなたがそれに表示して、選択リストでそれらを表示するNgForディレクティブを使用する必要があるモデルを格納する変数を使用することができます。

<select class="form-control" formControlName="models"> 
    <option *ngFor="let m of models" [value]="m">{{m}}</option> 
</select> 

そして、あなたのコンポーネントで：

this.vehicleForm.controls['make'].valueChanges.subscribe((value) => { 
    console.log(value); 
    this.models = ... // here you add models to variable models based on selected make 
}); 

この道を変数modelsが変更されるたびに、それらの変更がドロップダウンリストに反映されます。