动态赋值时如何阻止ion-checkbox的onChange事件触发，仅UI交互时响应？

问题根因 #

你使用的[(ngModel)]双向绑定会在TS代码手动修改item.value时，同步更新ion-checkbox的视图状态，进而触发ionChange事件，导致回调方法被误执行。

解决方案1：新增程序修改标志位（侵入性最小，无需修改原有模板逻辑） #

1. 先在TS文件中新增一个全局标志位，用来标记当前是否为代码动态修改值的场景：

// 组件类中定义
private isProgrammaticModify = false;

2. 在所有动态赋值item.value的代码块前后加上标志位的切换：

// 动态赋值前先开启标志
this.isProgrammaticModify = true;
// 这里写你原本的动态赋值逻辑，示例如下
this.collectionValues.forEach(item => {
  item.value = false;
});
// 等待Angular变更检测完成后关闭标志，0ms定时器即可
setTimeout(() => {
  this.isProgrammaticModify = false;
}, 0);

3. 在onCheckBoxChange方法开头加拦截判断：

onCheckBoxChange(item, event) {
  // 程序动态修改的场景直接跳过业务逻辑
  if (this.isProgrammaticModify) return;
  // 以下是你原本的业务逻辑
  // ...
}

注意：该方案兼容鼠标点击、键盘操作等所有用户手动触发的勾选场景。

解决方案2：拆分双向绑定，仅监听用户点击事件（逻辑更干净，无需维护标志位） #

1. 修改模板代码，把双向绑定拆分为单向属性绑定+点击事件监听，去掉ionChange绑定：

<ng-container *ngFor="let item of collectionValues">   
  <ion-checkbox slot="end" 
    [checked]="item.value" 
    (click)="onCheckBoxChange(item, $event)">
  </ion-checkbox>
</ng-container>

2. 修改onCheckBoxChange方法，手动同步状态后执行业务逻辑：

onCheckBoxChange(item, event) {
  // 阻止事件冒泡（可选，按需开启）
  // event.stopPropagation();
  // 手动更新绑定值
  item.value = !item.value;
  // 以下是你原本的业务逻辑
  // ...
}

该方案下TS代码中动态修改item.value只会更新复选框的选中状态，不会触发点击事件，自然不会执行业务逻辑。

注意：如果你的场景需要支持键盘空格选中复选框的交互，建议选择方案1，方案2仅监听鼠标点击事件，不会响应键盘操作。

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