在动态行角度编辑级联下拉列表？

问题描述

我在动态行中有几个级联下拉列表。当我单击“编辑”按钮时，应该会填充该特定行。 我成功地从数据库中获取了数据，并且填充了一列，但其中两列没有。你能帮我找出原因吗？

这是我点击编辑按钮后的数据：

这是我的 HTML 代码：

 <form [formGroup]="contactForm" (ngSubmit)="submit()">
  <table class="table table-striped table-bordered">
    <tr>
      <td>
        <button class="btn btn-primary" type="button" (click)="addItem()">Add</button>
      </td>
    </tr>
    <ng-container formArrayName="itemRows">
      <tr *ngFor="let itemRow of itemRows.controls; let i = index" [formGroupName]='i'>

        <td>
          <select  id="relation_id{{i}}" class="form-control" formControlName="relation_id">
                                                                                    <!-- <option value='' >Select Type</option> -->
                                                                                    <option *ngFor="let rel of relations" [value]="rel.id">{{rel.typeName}}</option>
                                                                                </select>
        </td>
        <td>
          <input id="name{{i}}" class="form-control" type="text" formControlName="name" />
        </td>
        <td>
          <input class="form-control" type="text" id="phone{{i}}" formControlName="phone"/>
        </td>
        <td>
          <select id="province_id{{i}}" class="form-control" formControlName="province_id" (change)="onChangeProvince(i)" >
                                                                                    <option value='' >Select Type</option>
                                                                                    <option *ngFor="let province of provinces" [value]="province.id">{{province.province_name}}</option>
                                                                                </select>
        </td>
        <td>
          <select  id="district_id{{i}}" class="form-control" formControlName="district_id">
                                                                                    <option value='' >Select Type</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)="deleteRow(i)">Delete</button>

        </td>
      </tr>
    </ng-container>
  </table>
</form>
    

这是我的组件代码：

export class EditContactComponent implements OnInit {
  id: any;
  data: any = [];
  provinces = <any>[];
  districts = <any[]>[];
  relations = <any>[];
  contactForm: FormGroup;
  constructor(
    public contactService: AddContactService,router: Router,private fb: FormBuilder,private route: ActivatedRoute,private myService: MyService
  ) {}

  getRelation() {
    this.contactService.getRelations().subscribe(data => {
      this.relations = data;
    });
  }

  getProvinces() {
    this.contactService.getProvinces().subscribe(data => {
      this.provinces = data;
    });
  }
  get itemRows() {
    return this.contactForm.get('itemRows') as FormArray;
  }
  onChangeProvince(i: any) {
    this.contactService
      .getdistrict(this.itemRows.get(i + '.province_id')!.value)
      .subscribe(data => {
        this.districts[i] = data;
      });
  }

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

  addItem(): void {
    this.itemRows.push(this.createItem());
  }

  deleteRow(i: number) {
    this.itemRows.removeAt(i);
  }
  ngOnInit() {
    this.contactForm = this.fb.group({
      itemRows: this.fb.array([this.createItem()])
    });
    this.id = this.route.snapshot.params['id'];

    this.myService.getData(this.id).subscribe(res => {
      this.data = res;
      let formArr = this.contactForm.get('itemRows') as FormArray;
      this.data.forEach(
        (x: {
          province_id: any;
          district_id: any;
          phone: any;
          name: any;
          relation_id: any;
        }) => {
          formArr.push(
            this.fb.group({
              province_id: x.province_id,district_id: x.district_id,phone: x.phone,name: x.name,relation_id: x.relation_id
            })
          );
          var obj = {
            province_id: x.province_id
          };
          this.contactService.getdistrict(obj).subscribe(data => {
            this.districts[x.district_id] = data;
          });
        }
      );
    });

    this.getRelation();
    this.getProvinces();
  }

  getdistricts(province_id: any) {
    var obj = {
      province_id: province_id
    };
    this.contactService.getdistrict(obj).subscribe(data => {
      this.districts[province_id] = data;
    });
  }

  submit() {}
}

它正确地从数据库中获取数据，但未填充下拉列表。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）