在 editable material table 中使用 mat-checkbox 时出错

Question

我使用 Angular Material 创建了一个可编辑的行，当一行处于可编辑状态时，每个单元格将根据显示的数据类型显示一个输入字段，例如如果单元格是一个字符串，它将有一个 'text'.

类型的输入字段

<mat-form-field>
   <mat-label> {{column}} </mat-label>
   <input type="text" matInput [(ngModel)]="element[column]"/>
</mat-form-field>

这在使用文本或数字时工作正常，但我也想有一个布尔复选框，但是当我尝试使用 mat-checkbox 而不是输入时，我收到错误 'mat-form-field must contain a MatFormFieldControl.'。尽管我使用的 ngModel 与我使用的文本和数字相同。

<div *ngIf="column === 'checkType'>
   <mat-checkbox [(ngModel)]="element[column]"></mat-checkbox>
</div>

如有任何帮助，我们将不胜感激。

Answer 1

目前您不能在 mat-form-field 中使用 mat-checkbox（不支持）：参见 https://github.com/angular/components/issues/7891

因此，当您使用 mat-checkbox 时，请不要将其嵌套在 mat-form-field 中。您可以直接给它一个 formControlName 或 [(ngModel)]，而不需要 mat-form-field.

<mat-checkbox [(ngModel)]="myVariable">

Error using mat-checkbox inside an editable material table