在Angular 8中建立动态字段

Question

我有一个看起来像这样的数组（这是api中的数据，将不断变化。这只是示例）

planDivList = [
    { planCode: "A", divisions: [] },
    { planCode: "B", divisions: [] },
    { planCode: "C", divisions: [{ divisionCode: "2", divisionName: "Assisted Living " }, { divisionCode: "1", divisionName: "LILC" }] },
    { planCode: "D", divisions: [{ divisionCode: "3", divisionName: "Four Seasons" }, { divisionCode: "2", divisionName: "Lakeside" }, { divisionCode: "1", divisionName: "Sunrise" }] }
  ];

我需要为每个复选框动态创建planCode和除法的复选框。.>

我的html：

<div class="form-check"> 
      <label [for]="i" class="form-check-label fw7 h5 mb0" formArrayName="planDivList"
          *ngFor="let plan of newEmployeeForm.controls.planDivList.controls; let i = index"><br>

          <input [name]="i" [id]="i" class="form-check-input" type="checkbox" [formControlName]="i">
          {{planDivList[i].planCode}}

          <label for="inputState">State
        <div>
          <select id="inputState" [(ngModel)]="" (ngModelChange)="errMsg = ''"
            [ngModelOptions]="{standalone: true}" formcontrolName=''>
            <option selected>Choose...</option>
            <option *ngFor="let plan of newEmployeeForm.controls.planDivList.controls; let i = index"> {{planDivList[i].divisions.divisionsName}}</option>
          </select>
        </div>
      </label>
        </label>


        <div class="error-message nt3 mb3 white flex items-center fw7"
         *ngIf="formInvalid && newEmployeeForm.controls.planDivList.hasError('required')">
         <i class="icon-alert s15 mr2"></i>At least one plan must be selected
        </div>

      </div>
我能够构建计划，但不能构建为dropdwn的部门。我不确定如何为每个Plancode构建下拉菜单。请帮助我是Angular的新手。

我有一个看起来像这样的数组（这是api中的数据，将不断变化。这只是示例）planDivList = [{planCode：“ A”，除法：[]}，{planCode：“ B”，除法：[]}，...

Answer 1

我认为问题出在您选项的* ngFor。试试这个：