Ionic点击按钮清空选中数组后如何同步取消所有checkbox的勾选

问题根因 #

你当前的ion-checkbox仅通过ionChange事件单向更新选中数组，没有将选中状态和checkedItems数组做绑定，所以数组清空后视图不会同步更新。

解决步骤 #

1. 修改html模板，给ion-checkbox添加绑定 #

在原有ion-checkbox标签上增加[checked]属性，绑定当前项是否在选中数组中即可：

<ion-checkbox 
  slot="end" 
  color="bic" 
  (ionChange)="onChange(workout)"
  [checked]="checkedItems.includes(workout)"
></ion-checkbox>

2. 原有逻辑无需额外修改 #

你现有的uncheckAll方法不需要调整，直接给checkedItems赋值空数组会触发Angular变更检测，自动重新计算所有checkbox的[checked]状态，实现同步取消全选。

uncheckAll(){
  this.checkedItems = [];
}

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