Angular 2 Reactive Forms - 在一個反應​​形式的數組中綁定選擇下拉值

Question

我創建了一個具有表單數組的反應形式。表單組在按鈕單擊時被推入表單數組中。所以每個按鈕點擊都會在屏幕上生成一段html。

該表單組包含2個具有父 - 子關係的下拉列表，即父母下拉項中的項的選擇決定要在子下拉列表中填充的值。

當我在父級下拉列表中選擇一個值時，更改事件會爲子級讀取結果，但這必須限制在特定表單數組元素的範圍內。目前，更改事件獲取數據併爲每個表單數組元素中的子級下拉列表設置值。這是我的標誌了

<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的基本結構是在組件聲明的屬性，它們都含有使用HTTP GET請求發送到Web服務器下面的代碼片段

Answer 1

使用於反應的碼值在選擇標籤的情況下形成。

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