为何Angular中绑定变量的checkbox不受对应变量控制？

你遇到的现象是Angular单向数据绑定的特性导致的，具体原因如下：

• [checked]="myVar1"属于单向输入绑定，仅负责把组件中myVar1的最新值同步到复选框的视图状态，不会自动把用户在视图上对复选框的操作同步回myVar1变量。
• 你手动点击复选框时，浏览器原生控件的默认行为会直接切换选中状态，此时因为myVar1的值没有发生变化，Angular的变更检测不会触发[checked]绑定的重新渲染，也就不会把复选框的状态重置回和myVar1一致的未选中状态，最终就出现了视图状态和组件变量值不一致的情况。

对应解决方案 #

场景1：需要复选框状态和myVar1完全双向同步 #

两种可选实现方式：

1. 使用Angular内置双向绑定语法（需要先在对应模块中导入FormsModule）：

<input type="checkbox" [(ngModel)]="myVar1"/> myVar1 {{myVar1}}

2. 手动绑定change事件实现双向同步：

<input type="checkbox" [checked]="myVar1" (change)="myVar1 = $event.target.checked"/> myVar1 {{myVar1}}

场景2：不允许用户修改复选框状态，永远和myVar1保持一致 #

两种可选实现方式：

<!-- 方式1：直接禁用控件 -->
<input type="checkbox" [checked]="myVar1" disabled/> myVar1 {{myVar1}}

<!-- 方式2：用户操作后强制重置回myVar1的取值 -->
<input type="checkbox" [checked]="myVar1" (change)="$event.target.checked = myVar1"/> myVar1 {{myVar1}}

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