在 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="inputDiv">Divsions
        <div>
          <select id="inputDiv" [(ngModel)]="division" (ngModelChange)="errMsg = ''"
            [ngModelOptions]="{standalone: true}" formcontrolName='divCtrl'>
            <option selected>Choose...</option>
            <option *ngFor="let division of planDivList[i].divisions">{{division.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.I 我不确定如何为每个计划代码制定下拉菜单。请帮助我是 Angular.

的新手

Answer 1

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

<option *ngFor="let division of planDivList[i].divisions">{{division.divisionsName}}</option>

您已经在 "newEmployeeForm.controls.planDivList.controls" 的循环中 - 因此无需再次循环，我认为问题出在哪里。

在 Angular 8 中构建动态字段

Build dynamic fields in Angular 8

select

checkboxlist

angular-ui

angular