动态行角度中的级联下拉列表

Question

我有级联下拉列表，它单独工作，但当我生成新行并更改其中一个下拉列表时，它会影响我的整个下拉列表。

这是我的html代码。

<td>       
<select class="form-control" formControlName="province_id" 
(change)="onChangeProvince($event)">
<option >Select Province</option>
<option *ngFor="let province of provinces; let i = index" 
[value]="province.id">{{province.province_name}}</option>
</select>
</td>
<td>
<select  class="form-control" formControlName="district_id">
<option >Select District</option>
<option *ngFor="let district of districts" [value]="district.id">
{{district.district_name}}</option>
</select>
</td>
<td>
<button class="btn btn-danger"  type="button" 
(click)="deleteMyRelation(i)">Delete</button>
<button class="btn btn-primary" type="button" 
(click)="addItem()">Add</button>
</td>

这是我的组件代码。

createItem(): FormGroup {
return this.fb.group({
province_id: '',
district_id: ''
});
}

addItem(): void {
this.itemRows = this.contactForm.get('itemRows') as FormArray;
this.itemRows.push(this.createItem());
}
ngOnInit() {
this.contactForm = this.fb.group({
province_id: '',
district_id: '',
itemRows: this.fb.array([ this.createItem() ])
});
this.getProvinces();
}
provinces = <any>[];
districts = <any>[];
getProvinces(){
this.contactService.getProvinces().subscribe(
data => {
this.provinces = data;
console.log(data);
},
error => {
console.log(error);
});
}
onChangeProvince(event:any){

this.contactService.getDistrict(event.target.value).subscribe(
data => {
this.districts = data;
},
error => {
console.log(error);
});
}

Answer 1

您需要用[formGroupName]='i'定义每个控件。现在Angular将正确地将值分配给每个组，类似于

<table [formGroup]='contactForm'>
<ng-container formArrayName='itemRows'>
<tr *ngFor="let itemRow of itemRows.controls; let i = index" [formGroupName]='i'>
<td>
<select class="form-control" formControlName="province_id"
(change)="onChangeProvince(i)">
<option  value=''>Select Province</option>
<option *ngFor="let province of provinces; let i = index" 
[value]="province.id">{{province.province_name}}</option>
</select>
</td>
<td>
<select  class="form-control" formControlName="district_id">
<option value=''>Select District</option>
<option *ngFor="let district of districts[i]" [value]="district.id">
{{district.district_name}}</option>
</select>
</td>
<td>
<button class="btn btn-danger"  type="button"
(click)="deleteMyRelation(i)">Delete</button>
<button class="btn btn-primary" type="button"
(click)="addItem()">Add</button>
</td>
</tr>
</ng-container>
</table>

我们现在可以定义以下功能来启用添加和删除项目

get itemRows() {
return this.contactForm.get("itemRows") as FormArray;
}
deleteMyRelation(i) {
this.itemRows.removeAt(i)
}
addItem(): void {
this.itemRows.push(this.createItem());
}
onChangeProvince(i) {
this.contactService
.getDistrict(this.itemRows.get(i + ".province_id").value)
.subscribe(
data => {
this.districts[i] = data;
},
error => {
console.log(error);
}
);
}

现在你的表单应该能像预期的一样工作

请参阅演示

Answer 2

补充答案，当订阅中唯一需要的使用.html中的值时，您可以使用管道异步。

您定义

//It's usually way, named a variable that was an observable adding a "$" to the variable
province$=this.contactService.getProvinces()
district$=[]

和往常一样，我们有一个formArray很好，有一个getter

get array(){
return this.contactForm.get('itemRows') as FormArray;  
}

你的(零钱(变得像

change(index)
{
const value=+(this.array.at(index) as FormGroup).get('province_id').value;
this.array.at(index).get('district_id').setValue(null)
this.district$[index]=this.dataService.getDistrict(value)
}

你可以使用

<select class="form-control" formControlName="province_id"
(change)="change(index)"  >
<!--see that in selectProvince we put [value]="null" and hidden-->
<option [value]="null" hidden>Select Province</option>
<option *ngFor="let province of province$|async; let i = index" 
[value]="province.id">{{province.province_name}}</option>
</select>
<select  class="form-control" formControlName="district_id">
<option [value]="null" hidden>Select District</option>
<option *ngFor="let district of district$[index]|async"
[value]="district.id">
{{district.district_name}}</option>
</select>

我在这个堆栈中写了一个愚蠢的例子(没有你的模型，但我希望能帮助获得灵感(