FormArray动态下拉列表数据未正确加载

问题描述

无法使用FormArray索引加载选定的国家/地区数据。在传递国家/地区代码以获取数据时，它会继续调用API。

尝试一下，

<form [formGroup]='formName'>
              <div formArrayName="controllerArray" class="ui-g ui-g-12 ui-g-nopad " >
                <div  class="ui-g  ui-g-12 ui-g-nopad " *ngFor="let item of formName.controls.controllerArray.controls; let i=index" [formGroupName]="i">  
                  <div class="ui-md-4">                   
                    <label class="mandatory"
                  >{{ labels["STATE_OF_INCORPORATION_FILE_NUMBER"] }}
                  <span class="colon"></span>
                </label>           

                <select formControlName="select1" class="ui-inputtext"> 
                  <option>--Select--</option>
                  <option *ngFor="let c of countryOptions" [ngValue]="c.value">{{c.label}}</option>
                 
                </select>
              </div>
              <div class="ui-md-4">
                <label class="lbl-hidden"> State </label>
                <select formControlName="select2" class="ui-inputtext"> 
                  <option>--Select--</option>
                  <option *ngFor="let b of getRelevantStates(item.controls.select1.value)" [ngValue]="b.value">{{b.label}}</option>
                 
                </select>
              </div>
              <div class="ui-md-3">
                <label class="lbl-hidden"> comments  </label>
                <input
                  type="text"
                  pInputText
                  class="form-control"
                  formControlName="input" />
                </div>
                <div class="ui-md-1">
                  <label class="lbl-hidden"> State </label>
                  <br/>
                  <button (click)='removeInput(i)'  style="min-width: auto;"  pButton icon="fa fa-minus"></button>
                </div>
                </div>
              </div>
            </form>
            
            <button class="add-remove-btn" pButton (click)='addinput()' icon="fa fa-plus"></button>

TS

getRelevantStates(countryId){
var states = [];
   this.serviceName.getStates(countryId).subscribe((res) => {
     return res[0].results;
    }

}

问题

预期为

应在每行中根据所选国家/地区加载州/地区。

解决方法

我无法重现您的脚本并检查其工作方式，但我认为将足够的异步管道添加到您的html中：

<option *ngFor="let b of (getRelevantStates(item.controls.select1.value) | async)" [ngValue]="b.value">{{b.label}}</option>

,

您必须将该函数调用从html移至ngOnInit或任何其他生命周期事件，并使用变量来存储数据，

 *ngFor="let item of collection"

定期对组件进行角度调用更改检测。如果要使用当前方法，请使用更改检测策略。