Angular ngFor 与 FormGroup 内的数组答案

【问题标题】：Angular ngFor with Array inside FormGroupAngular ngFor 与 FormGroup 内的数组
【发布时间】：2021-02-15 13:59:05
【问题描述】：

我有这个表单组

this.form = this.fb.group({
      id: [null],
      nome: [null, [Validators.maxLength(60), Validators.required]],
      cpf: [null, [Validators.required]],
      email: [null, [Validators.required, Validators.maxLength(100)]],
      telefone: [null, [Validators.maxLength(14)]],
      celular: [null, [Validators.maxLength(14)]],
      dataInclusao: [null],
      dataDesligado: [null],
      gruposEconomicos: [null]
    });

而gruposEconomicos 是一个对象数组。我想在mat-select 中检索这个数组，但我收到了这条消息

ERROR Error: Cannot find a differ supporting object 'true' of type 'boolean'. NgFor only supports binding to Iterables such as Arrays.

这就是我尝试循环遍历 this.form.gruposEconomicos 的方式：

<div fxLayout="row" fxLayoutAlign="start center" class="mt-24">
  <mat-form-field appearance="outline" fxFlex="30">
    <mat-label>Grupo Econômico</mat-label>
    <mat-select [(value)]="grupoEconomicoId" (change)="handleGroupChange($event.target.value)">
      <option *ngFor="let group of form.get('gruposEconomicos').pristine" [ngValue]="group.id">{{ group.nome }}</option>
    </mat-select>
  </mat-form-field>
</div>

我也试过了：

<option *ngFor="let group of form.controls.gruposEconomicos" [ngValue]="group.id">{{ group.nome }}</option>

【问题讨论】：

标签： angular typescript ngfor formgroups

【解决方案1】：

试试这个

<option *ngFor="let group of form.get('gruposEconomicos').value" [ngValue]="group.id">{{ group.nome }}</option>

【讨论】：

您好，感谢您的意见。它解决了错误，但我无法在选择器上看到列表。像这样访问时它返回null。但是当我console.log(this.form.controls.gruposEconomicos) 我可以看到值
进一步了解表单控件
FormControl.value 将为您提供该输入的值，无论是数组还是字符串。但是 this.form.controls.gruposEconomicos 会给你整个 FormControl 对象