Angular中通过事件动态更新复选框绑定属性值的问题排查

问题根源 #

JavaScript中基本类型（布尔、数字、字符串等）是值传递，你把check1传给onCheck方法时，实际传递的是当前值的副本，而非属性本身的引用。所以在方法里修改参数check，只会改变副本的值，完全不会影响组件实例上的this.check1。

另外，模板上下文默认指向组件实例，不需要写this.check1，直接写check1即可，写this.check1属于语法错误，会导致绑定失效。

正确解决方法 #

方法1：直接操作目标属性 #

既然要更新check1，无需将其作为参数传递，直接在方法里修改实例属性：

<input (click)="onCheck()" type="checkbox" [checked]="check1" />

public check1: boolean = false;

onCheck() {
  this.check1 = !this.check1;
}

方法2：传递属性名批量处理 #

如果有多个复选框（如check1、check2），可以传递属性名字符串，通过对象属性访问器修改：

<input (click)="onCheck('check1')" type="checkbox" [checked]="check1" />
<input (click)="onCheck('check2')" type="checkbox" [checked]="check2" />

public check1: boolean = false;
public check2: boolean = false;

onCheck(propName: keyof this) {
  this[propName] = !this[propName];
}

方法3：使用Angular双向绑定（最简洁） #

Angular提供复选框专属的双向绑定语法[(ngModel)]，无需手动编写点击事件：

<input type="checkbox" [(ngModel)]="check1" />

只需在组件类中定义check1，Angular会自动同步复选框状态与属性值。注意要在所属模块中导入FormsModule才能使用ngModel。

内容的提问来源于stack exchange，提问作者Bayes-T