Angular多选框else分支仅在全部取消勾选时触发的实现方案求助

问题根源 #

你现有代码的判断逻辑只针对当前触发change事件的单个复选框，只要本次操作是取消勾选，不管其他复选框是否仍处于选中状态，都会直接进入else分支，不符合你的需求。

解决方案 #

无需修改HTML代码，仅调整changeSelection方法的逻辑即可：每次复选框状态变更后，先过滤出所有处于选中状态的产品，再根据过滤结果的长度判断分支走向：

• 只要有至少1个产品被选中，就将过滤结果赋值给selectedItemsList
• 仅当过滤结果为空（所有复选框都取消勾选）时，才执行else分支的逻辑

修改后的.ts代码 #

changeSelection(event: any) {
  debugger;
  // 先过滤出所有已选中的产品
  const checkedProducts = this.DisplayProductList.filter(product => product.isChecked);
  if (checkedProducts.length > 0) {
    // 只要还有选中的项，就更新选中列表
    this.selectedItemsList = checkedProducts;
  } else {
    // 所有项都取消选中时才走这个分支
    this.selectedItemsList = this.ProductData;
  }
}

可选优化 #

如果不需要用到触发事件的event参数，还可以直接把参数去掉，进一步简化代码：
HTML里把(change)="changeSelection($event)"改成(change)="changeSelection()"，ts对应修改方法定义即可。

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