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

Posted 2023-05-07

【中文标题】即使模型值为真，材料复选框也未选中

【英文标题】：material check box not checked even model value is true

【发布时间】：2019-08-29 06:55:54

【问题描述】：

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

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

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

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

【问题讨论】：

向我们展示element 对象

请分享您的完整代码

请检查下面的元素对象， "compId": "DataGenerator_514209", "select": false, "excludeFields": [ "SepalLength", "SepalWidth", "PetalLength", "PetalWidth" , "Species", "IndexedSpecies", "deci", "booleandata", "datedata", "ipdata", "geodata", "Species1", "DiscretePlaceHolder", "item" ]

添加完整代码（html和ts）

由于公司的某些政策，我无法添加完整代码。

【参考方案1】：

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

我会尝试摆脱那个formControlName，它应该可以按你的意愿工作。

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

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

【参考方案2】：

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

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

【参考方案3】：

在这里，您要根据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>