Angular中基于条件的Checkbox选中状态失效问题求助

你的问题出在同时使用[(ngModel)]双向绑定、(change)事件和[checked]属性绑定，三者存在冲突：Angular中ngModel会优先控制复选框的选中状态，手动设置的[checked]会被忽略，导致你的条件判断不生效。

以下是两种可行的修复方案：

方案一：利用getter/setter转换值类型 #

在组件类中定义一个中间属性，通过getter和setter将布尔值（复选框的默认值类型）与你需要的1/0做转换：

// 组件类代码
get isActive(): boolean {
  // 将1/'1'转为布尔值true，其他情况为false
  return this.user.IsActive === 1 || this.user.IsActive === '1';
}

set isActive(value: boolean) {
  // 将复选框的布尔值转为1或0
  this.user.IsActive = value ? 1 : 0;
}

模板中直接绑定这个中间属性即可，无需额外事件或checked绑定：

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

方案二：拆分ngModel的双向绑定 #

分开使用[ngModel]单向绑定状态、(ngModelChange)事件处理值更新，完全替代(change)和[checked]：

<input type="checkbox" 
       [ngModel]="user.IsActive == 1 || user.IsActive == '1'" 
       (ngModelChange)="user.IsActive = $event ? 1 : 0">

• [ngModel]负责将user.IsActive的1/'1'转为布尔值，控制复选框是否选中
• (ngModelChange)在复选框状态变化时，将布尔值转回1或0赋值给user.IsActive

为什么原代码不生效？ #

[(ngModel)]是[ngModel]（状态绑定）+(ngModelChange)（事件触发）的语法糖，你额外添加的(change)事件和[checked]绑定会与ngModel的逻辑冲突：ngModel会优先覆盖[checked]的状态，同时(change)里的赋值可能和ngModel的更新逻辑互相干扰，最终导致状态判断失效。

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