mat-checkbox绑定反向值仅双击生效，条件为false时无法正常勾选

嘿，你遇到的这个问题我太熟悉了！直接在[(ngModel)]里用!entity.enabled是踩了Angular双向绑定语法糖的坑，咱们一步步来拆解和解决：

为什么会出现“第二次点击才生效”的问题？ #

Angular的双向绑定[(ngModel)]其实是单向绑定+事件绑定的语法糖，展开后是这样的：

<mat-checkbox [ngModel]="!entity.enabled" (ngModelChange)="!entity.enabled = $event"></mat-checkbox>

问题就出在(ngModelChange)的赋值逻辑上：!entity.enabled = $event是一个无效的表达式——你没法直接给一个取反运算的结果赋值！第一次点击时，模型根本没被正确修改，直到第二次点击，视图和模型的同步机制才“补了一刀”，导致状态延迟更新。

两种靠谱的解决方案 #

方案1：用Getter/Setter封装状态（推荐） #

在组件类里新增一个专门用于绑定复选框的属性，通过getter和setter来映射entity.enabled的反向状态：

// 组件类代码
get isMarkedForDelete(): boolean {
  // 返回与enabled相反的状态
  return !this.entity.enabled;
}

set isMarkedForDelete(value: boolean) {
  // 勾选时，把enabled设为false（软删除）；取消勾选则设为true
  this.entity.enabled = !value;
}

然后模板里直接绑定这个封装后的属性：

<mat-checkbox [(ngModel)]="isMarkedForDelete">{{isMarkedForDelete}}</mat-checkbox>

这种方式最清晰，也符合Angular的最佳实践，后续维护起来也方便。

方案2：手动拆分双向绑定 #

如果不想新增属性，也可以直接把双向绑定拆成单向绑定+事件绑定，手动处理赋值逻辑：

<mat-checkbox 
  [ngModel]="!entity.enabled" 
  (ngModelChange)="entity.enabled = !$event"
>
  {{!entity.enabled}}
</mat-checkbox>

这里[ngModel]负责把!entity.enabled的状态同步到复选框，(ngModelChange)则在复选框状态变化时，直接把取反后的结果赋值给entity.enabled，第一次点击就能立即生效。

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