Question

我有一个带有一些数据和复选框的垫子表，当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>

请让我知道这段代码有什么问题吗？

我也尝试了属性绑定[checked]="model.select"。它也不能与此配合使用。

当element.select为true时，应选中

复选框。

Answer 1

将[checked]属性添加为ckeckbox到[checked]="element.select"：

<mat-checkbox [(ngModel)]="element.select"  [checked]="element.select" formControlName="select" (change)="checkIfAllSelected()"></mat-checkbox>

Answer 2

要根据element.select的条件在此处选中复选框，则需要将element.select（而不是[checked]=element.select）作为属性绑定到model.select。因此，尝试这样：

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

Answer 3

您混合使用反应形式（formControlName）和模板驱动形式（ngModel），这可能会引起一些问题。

我会尝试摆脱该formControlName，它应该可以根据您的需要工作。

以下是一个没有formControlName的示例： https://stackblitz.com/edit/angular-stack-checkboxtable-55568107 （基于材料本身的示例）

在此示例中您可以看到，[(ngModel)]可以正常工作，如果添加formControlName则有点奇怪。

即使模型值为真，也未选中材料复选框

3 个答案: