Angular 13升级后Mat-Checkbox绑定0时异常选中求助

问题原因 #

Angular Material 13对mat-checkbox的checked属性做了类型校验强化，不再自动将0这类假值转换为false；而Angular 12中会把0和false统一视为未选中状态，这就导致版本升级后行为不一致。

解决方案 #

1. 模板中显式转换为布尔值

直接在绑定表达式里用!!或Boolean()函数将数值转换为布尔值，保持和Angular 12一致的行为：

<mat-checkbox color="primary"
   [checked]="!!workOrderDtiConstraint.ESCALATED">
</mat-checkbox>

或者：

<mat-checkbox color="primary"
   [checked]="Boolean(workOrderDtiConstraint.ESCALATED)">
</mat-checkbox>

2. 数据层面统一转换

在获取或处理workOrderDtiConstraint数据时，将ESCALATED字段的0/1值转换为false/true，无需修改模板：

// 示例：在组件或服务中处理数据
this.workOrderDtiConstraints.forEach(item => {
  // 1转为true，0转为false
  item.ESCALATED = item.ESCALATED === 1;
});

之后模板保持原绑定即可：

<mat-checkbox color="primary"
   [checked]="workOrderDtiConstraint.ESCALATED">
</mat-checkbox>

3. 双向绑定场景适配（若需）

如果需要双向绑定（比如用户操作后要更新数据），可以结合ngModel并在写入时转换数值：

<mat-checkbox color="primary"
   [(ngModel)]="isEscalated"
   (ngModelChange)="onEscalatedChange($event, workOrderDtiConstraint)">
</mat-checkbox>

组件中处理转换逻辑：

onEscalatedChange(isChecked: boolean, item: any) {
  item.ESCALATED = isChecked ? 1 : 0;
}

内容的提问来源于stack exchange，提问作者Darrell