Angular Material复选框绑定疑问：绑定值未设为true却可正常切换

先直接给结论：你遇到的现象完全符合Angular Material复选框（MatCheckbox）的设计逻辑，不是bug。下面分两种场景详细解释：

场景1：[checked]绑定到永远为false的值，但复选框能切换 #

Angular Material的MatCheckbox组件内部维护了独立的选中状态，而[checked]只是单向数据绑定：它只负责把外部属性的值同步到组件内部（比如初始化状态），但不会反过来把用户交互产生的内部状态变化同步回外部属性。

举个例子：

<mat-checkbox [checked]="false">同意条款</mat-checkbox>

• 初始时，复选框会按照[checked]="false"显示为未选中。
• 当你点击复选框时，组件会直接更新自己内部的_checked状态为true，同时更新UI显示为勾选。因为[checked]是单向绑定，组件不会把内部的true同步回你绑定的false值，所以UI会保持勾选状态。

如果想要让UI状态严格跟随外部属性，你需要监听(change)事件手动同步，或者直接禁用复选框（[disabled]="true"），阻止用户交互修改状态。

场景2：用[(ngModel)]绑定，且ngModelChange强制设为false，但复选框仍能切换 #

这种情况的核心是事件执行顺序：

1. 你点击复选框 → MatCheckbox先更新自己的内部状态为true，触发change事件。
2. ngModel接收到这个true值，把你的termsAndCondition属性设为true，然后触发ngModelChange事件。
3. 你在ngModelChange里把termsAndCondition重新设为false。
4. Angular的变更检测会在下一个周期运行，发现termsAndCondition是false，于是把MatCheckbox的checked状态同步回false，UI会变回未勾选。

你觉得“仍能切换”，大概率是看到了点击瞬间的UI变化（先勾选再取消的闪屏效果）。如果你的事件处理是同步执行的，正常情况下不会出现稳定的切换状态；如果确实能稳定切换，可能是你在事件处理中用了异步操作（比如setTimeout），导致变更检测延迟，让UI有机会保持勾选状态。

如何让UI和外部属性严格同步 #

如果你希望复选框的状态完全由外部属性控制，不允许用户随意修改，可以这么做：

• 方案1：禁用复选框，阻止用户交互：

  <mat-checkbox [(ngModel)]="termsAndCondition" [disabled]="true">同意条款</mat-checkbox>
  

• 方案2：监听change事件，强制把内部状态同步回外部属性：

  <mat-checkbox [checked]="termsAndCondition" (change)="termsAndCondition = false">同意条款</mat-checkbox>
  

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