动态 mat-checkbox 未从 FormGroup 显示

Question

我希望从数组中填充 mat-checkboxes。我能够构建表单组和表单数组并在控制台中查看它们的内容。但我无法使用 ngFor 获取要显示的设备列表。我查找了多个响应式表单的示例，并认为我正确地执行了这个 html，但显然我遗漏了一些东西。

这里是ts代码：

import { Aircraft } from '../../shared/aircraft';
import { Component, OnInit, Inject } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material";
import { ViewEncapsulation } from '@angular/core';
import { forEach } from '@angular/router/src/utils/collection';

interface IAircraftCheckbox {
  imei: string;
  selected: boolean;
  name: string;
}

@Component({
  selector: 'app-historical-track-dialog',
  templateUrl: './historical-track-dialog.component.html',
  styleUrls: ['./historical-track-dialog.component.scss',],
  encapsulation: ViewEncapsulation.None
})


export class HistoricalTrackDialogComponent implements OnInit {
aircraftData: any[];
imeiToTrack: string[];
breakpoint: number;
form: FormGroup;
aircraftArray: FormArray;
allSelected: boolean;

  constructor(public dialogRef: MatDialogRef<HistoricalTrackDialogComponent>,
              private fb: FormBuilder,
              @Inject(MAT_DIALOG_DATA) public data: Aircraft[]) {
    this.aircraftData = data;
    console.log('historical track dialog, this.aircraftList: ', data);
    this.aircraftArray = new FormArray([new FormControl('CAP')]);
    this.aircraftArray = this.mapAircraftToCheckboxArrayGroup( this.aircraftData);
    this.form = new FormGroup({
      aircraftList: this.aircraftArray
    });
    this.allSelected = false;
    console.log('this.form: ', this.form);
    console.log('this.aircraftList = ', this.form.controls.aircraftList);
  }

  mapAircraftToCheckboxArrayGroup( aircraft: Aircraft[]): FormArray {
    return this.fb.array(aircraft.map((i) => {
      return this.fb.group ({
        imei: i.IMEI,
        selected: false,
        name: i.DeviceName
      });
    }));
  }

  checkboxToggle(e) {
    console.log('CheckboxToggle, e=', e);
    console.log('source.id', e.source.id);
    console.log('status: ', e.checked);
  }

  toggleAll(e) {
    for (const control of this.aircraftArray.controls) {
      if (this.allSelected === true ) {
        console.log('setting ', control.value.name, 'to false');
        control.value.selected = false;
      } else {
        control.value.selected = true;
        console.log('setting ', control.value.name, 'to true');
      }
    }
    this.allSelected = this.allSelected === true ? false : true;
    this.form.markAsDirty();

  }
  ngOnInit() {
this.breakpoint = (window.innerWidth <= 690) ? 1 : 4;
  }
  onResize(event) {
    this.breakpoint = (event.target.innerWidth <= 690) ? 1 : 4;
  }

  close() {
    console.log('close, formArray: ', this.aircraftArray.controls);
    for (const control of this.aircraftArray.controls) {
      if (control.value.selected === true ) {
        console.log('aircraft checked: ', control.value.name);
      }
    }
    this.dialogRef.close();

  }

}

这里是html：

<div class="aList-container"
      fxLayout="column"
      fxLayoutGap="10px"
      fxLayoutAlign="start"
       style="width:500px;max-height:50%">

      <div >
          <div class="a-list-title" >
            <h3>AIRCRAFT LIST</h3>
            <hr>
          </div>
      </div>

      <div class="checkboxList" [formGroup]="form">

        <mat-grid-list [cols]="breakpoint" rowHeight="30px" gutterSize="0px" formArrayName="aircraftList" (window:resize)="onResize($event)">
            <mat-grid-tile fxLayout="column"  *ngFor="let aircraftName of aircraftList.value" [formGroup]="aircraftList">
              <mat-checkbox [formControl]="aircraftName.get('selected')">
                <!--{{aircraftName.get('name').value}}-->
                {{aircraftList}}
              </mat-checkbox>

              </mat-grid-tile>
              <mat-grid-tile fxLayout="column" >
                  <mat-checkbox id="toggle-all" ng-model="all" (click)="toggleAll($event)">Toggle All</mat-checkbox>
              </mat-grid-tile>
        </mat-grid-list>
        <div class="close-button">
            <button class="mat-raised-button " routerLink="/home" (click)="close()" style="margin: 10px;position:center">Close</button>
        </div>

      </div>
</div>

在运行时，我从模板中收到一条错误消息，告诉我未定义控件或值（两者都尝试过）。但是当我记录 formArray 时它们就在那里：

我看到的只是一个空白对话框。

我确定我错过了响应式表单的一些简单和基本的东西，但我已经追了 3 天了.....

Answer 1

<mat-grid-tile fxLayout="column"  *ngFor="let aircraftName of aircraftList.value" [formGroup]="aircraftList">

您还没有定义任何aircraftList 对象。它是一个表单组内的控件：

this.form = new FormGroup({
  aircraftList: this.aircraftArray
});

所以你也应该这样访问它：

 <mat-grid-tile fxLayout="column"  *ngFor="let aircraftName of form.controls.aircraftList.value" [formGroup]="aircraftList">