在可编辑材料表中使用 mat-checkbox 时出错

如何解决在可编辑材料表中使用 mat-checkbox 时出错

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

<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> 

任何帮助将不胜感激。

解决方法

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

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

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