动态行角度的级联下拉菜单？

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);
        }
      );
  }

现在您的表单应该可以正常工作了

See Demo

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>

我在this stackblitz写了一个傻瓜例子（没有你的模型，但希望能帮助启发）