Angular Form Array下拉初始数据和所选值不起作用

问题描述

我使用表格数组（例如国家和州）创建了动态下拉列表。将根据国家/地区选择加载国家/地区。

在这里，我正在尝试根据**ngOnInit()**中最初可用的数据创建两个行表单组。

国家/地区数据将在创建from控件之前可用，因此可以很好地处理数据和所选值。

，但说明未加载数据。我的代码有什么问题？

HTML

<form [formGroup]='entityForm'>
              <div formArrayName="optionGroups" class="ui-g ui-g-12 ui-g-nopad " >
                <div  class="ui-g  ui-g-12 ui-g-nopad " *ngFor="let item of entityForm.controls['optionGroups'].controls; let $index=index" [formGroup]="item">        
                  <div class="ui-md-4">                   
                    <label class="mandatory"
                  >{{ labels["STATE_OF_INCORPORATION_FILE_NUMBER"] }}
                  <span class="colon"></span>
                </label>
                <select formControlName="country" class="ui-inputtext" (change)="onCountryChange(entityForm.controls['optionGroups'].controls[$index].controls['country'].value,$index)" > 
                  <option>--Select--</option>
                  <option *ngFor="let c of countries" [ngValue]="c.value">{{c.label}}</option>                 
                </select>
              </div>
              <div class="ui-md-4">

                <label class="lbl-hidden"> State </label>
                <select formControlName="state" class="ui-inputtext"> 
                  <option>--Select--</option>
                  <option *ngFor="let state of states[entityForm.controls['optionGroups'].controls[$index].controls['country'].value]" value="state.value">{{state.label}}</option>
              </select>
              </div>
</div>

TS

   initFormArray(initForm:any) {
    const formArray = this.entityForm.get('optionGroups') as FormArray;
    initForm.map((item,index) => {
      formArray.push(this.createForms(item,index));
    });
    this.entityForm.setControl('optionGroups',formArray);
   }

   createForms(adresse,index): FormGroup {
     this.onCountryChange(adresse.select1,index)
    let formGroup: FormGroup = new FormGroup(
      {
        country: new FormControl(adresse.country),state: new FormControl(adresse.state),place: new FormControl(adresse.place)
      }
    );
    return formGroup;
  }



  onCountryChange(selectedCountry: string,formIndex : number) : void {
      this.states[selectedCountry] = this.getStates(selectedCountry)
    }

    ngOnInit() {
    
      let data = [ {country: "US",state: "AZ",place: "null"},{country: "CA",state: null,place: null}]

this.initFormArray(data);

}

以下是默认视图问题的屏幕截图

更改国家/地区值后，它可以正常工作

预期为，默认情况下，两个国家和州的数据都应加载如下所示的选定值。

解决方法

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

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

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