角2反応型 - 反応型のフォーム配列でドロップダウン値を選択する

Question

フォーム配列を持つ反応型を作成しました。ボタンクリックでフォームグループがフォーム配列にプッシュされます。したがって、ボタンをクリックするたびに画面上にhtmlのセクションが生成されます。

このフォームグループには、親子関係を持つ2つのドロップダウンリストが含まれています。つまり、親ドロップダウン内のアイテムの選択は、子ドロップダウンに読み込まれる値を決定します。

親ドロップダウンイベントで値を選択すると、子の結果がフェッチされますが、これは特定のフォーム配列要素の範囲に限定する必要があります。現在changeイベントはデータをフェッチし、各フォーム配列要素の子ドロップダウンの値を設定します。これは

<form [formGroup] = "mainForm" (ngSubmit)="savedata()"> 
<div>some form control</div> 
<div formArrayName = "myArray" *ngFor="let arrayitem of myArray.controls";let i = index"> 
<div [formGroupName] = "i"> 
<div> 
<select class="form-control" (change)="onSelect($event.target.value)" id="{{'header' + i}}" formControlName="parentdrpdown"> 
<option value="" disabled selected hidden>Select a Parent...</option> 
<option *ngFor="let pitem of parentdrpdown" 
     value={{pitem.id}}> 
     {{pitem.name}} 
</option> 
</select> 
</div> 
<div> 
<select class="form-control" (change)="onSelect($event.target.value)" id="{{'header' + i}}" formControlName="childdrpdown"> 
<option value="" disabled selected hidden>Select a Child...</option> 
<option *ngFor="let citem of childdrpdown" 
     value={{citem.id}}> 
     {{citem.name}} 
</option> 
</select> 
</div> 
</div>  
</div> 

constructor(private fb: 
FormBuilder, private _segService: SegmentService) { 
    this.parentdrpdown= this._segService.getparentValues(); 

onSelect(pid) { 
    this.childdrpdown= this._segService.getChildSegment() 
     .filter((item) => item.parentid == pid); 
} 

parentdrpdownとchilddrpdownアップ私のマークの基本的な構造は、プロパティは、コンポーネント内で宣言され、それらが反応性のコードのためのWebサーバにスニペット以下

Answer 1

使用をHTTP GETリクエストを使用して値がロードされています選択タグの場合はフォーム。

<h1>My Application</h1> 
<select formControlName="selectedValue"> 
    <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option> 
</select>