javascript - Material 复选框未选中，即使模型值为真

Question

我有一个带有一些数据和复选框的 mat-table，当 model.select 属性为 true 时应该选中它们，但是当我使用 [(ngModel)]="element.select" 所有复选框都被选中。下面是代码，

<td mat-cell *matCellDef="let element">
   {{element.select}}
   <mat-checkbox [(ngModel)]="element.select" formControlName="select" (change)="checkIfAllSelected()"></mat-checkbox>
</td>

请告诉我这段代码有什么问题？

我也尝试过属性绑定(bind) [checked]="model.select"。它也不适用于此。

当 element.select 为 true 时，复选框应该被选中。

Answer 1

您混合使用了响应式(Reactive)表单 (formControlName) 和模板驱动表单 (ngModel)，这可能会导致一些问题。

我会尝试摆脱那个 formControlName，它应该可以如你所愿地工作。

这是一个没有 formControlName 的例子: https://stackblitz.com/edit/angular-stack-checkboxtable-55568107 (以素材本身为例)

正如您在此示例中看到的那样，[(ngModel)] 按预期工作，如果您添加 formControlName，它的工作方式会有点奇怪。