Angular 8 动态复选框和来自 api 的数据的下拉列表答案

【问题标题】：Angular 8 dynamic checkbox and dropdown from data from apiAngular 8 动态复选框和来自 api 的数据的下拉列表
【发布时间】：2020-06-22 16:42:15
【问题描述】：

这是我的堆栈闪电战 https://stackblitz.com/edit/angular-w8g8ng?file=src%2Fapp%2Fapp.component.html

如果分区为空，我想隐藏下拉菜单，并将下拉菜单的值默认为第一个。我怎样才能做到这一点？请帮忙。

<form [formGroup]='newEmployeeForm' class="w-60-l">
  <label [for]="i"  formArrayName="planDivList"
          *ngFor="let plan of newEmployeeForm.controls.planDivList.controls; let i = index"><br>

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

          <label for="inputDiv">Divisions
            <select id="inputDiv" [(ngModel)]="division" (ngModelChange)="errMsg = ''"
              [ngModelOptions]="{standalone: true}" formcontrolName='divCtrl'>
              <option *ngFor="let division of planDivList[i].divisions">{{division.divisionName}}</option>
            </select>
          </label>

        </label>

        <div
          *ngIf="formInvalid && newEmployeeForm.controls.planDivList.hasError('required')">
        At least one plan must be selected
        </div>
</form>

这是我不断变化的 api 数据集

 planDivList = [
    { planCode: "B3692", divisions: [] },
    { planCode: "B3693", divisions: [] },
    { planCode: "B67", divisions: [{ divisionCode: "2", divisionName: "Assisted Living " }, { divisionCode: "1", divisionName: "LILC" }] },
    { planCode: "B69", divisions: [{ divisionCode: "3", divisionName: "Four Seasons" }, { divisionCode: "2", divisionName: "Lakeside" }, { divisionCode: "1", divisionName: "Sunrise" }] }

  ];

【问题讨论】：

这段代码真的很困惑，你将 ngForm 与响应式表单混合在一起，最好修改它。

标签： angular angular7 angular8

【解决方案1】：

要隐藏下拉菜单，您需要在选择标签中添加 *ngIf，如下所示：

<select *ngIf="planDivList[i].divisions.length > 0" id="inputDiv"...

并且要选择下拉列表的第一个值，您在创建它时设置 formControl 的值，例如：

divCtrl: new FormControl(this.planDivList[0].divisions[0], [Validators.required])

【讨论】：

隐藏有效但默认无效.. 我如何将值默认为每个下拉菜单中的第一个选项？此外，如果我在一个下拉列表中选择一个值，另一个下拉列表值将重置为空。这是我的代码。 stackblitz.com/edit/…
我做得对还是有其他方法可以实现我的目标？
您使用了错误的默认值，您在 HTML 中的选项值是一个数字 Value="division.divisionCode"，要修复它，我将 HTML 更改为 select 标签，获取正确的 formControl、<select id="inputDiv" [formControl]="newEmployeeForm?.controls.divCtrl"> <option *ngFor="let division of planDivList[i].divisions" [value]="division.divisionCode">{{division.divisionName}}</option> </select> 和TS 你需要添加默认值，比如 DivisionCode (1, 2, 3...) divCtrl: new FormControl(1, [Validators.required])
并且要处理当 divCtrl 值发生变化时，您需要添加这一行 this.newEmployeeForm.controls.divCtrl.valueChanges.subscribe((value) => { console.log(value); });