按ID筛选产品后取消全选复选框无法显示初始产品列表如何解决

原有代码问题 #

• 没有维护全局的选中ID集合，筛选逻辑依赖当前已筛选的产品列表，取消最后一个勾选后筛选结果为空，没有做兜底返回全量原始数据的逻辑
• 数组拼接逻辑冗余，多重循环性能差，且两次循环都用了i作为变量名，会出现变量覆盖的隐藏bug

修复步骤 #

1. 新增一个变量存储当前所有选中的复选框ID，替换原有逻辑里的newArray
2. 每次复选框触发变更时，先更新选中ID集合，再统一做筛选
3. 增加兜底判断：如果当前没有选中的ID，直接把展示的产品列表赋值为原始全量数据即可

修复后完整代码 #

首先在TS中新增存储选中ID的变量：

// 新增变量：存储当前选中的所有供应商ID
selectedIds: number[] = [];
// 注意：请确保this.arrays是productData返回的原始全量产品数据，筛选过程中不要修改它的值

替换原有onChange函数逻辑：

onChange(event: any) {
  const targetId = Number(event.target.value);
  // 第一步：更新选中ID列表
  if (event.target.checked) {
    // 勾选就加入选中集合，避免重复添加
    if (!this.selectedIds.includes(targetId)) {
      this.selectedIds.push(targetId);
    }
  } else {
    // 取消勾选就从选中集合里移除
    this.selectedIds = this.selectedIds.filter(id => id !== targetId);
  }

  // 第二步：统一做筛选逻辑
  if (this.selectedIds.length === 0) {
    // 没有选中任何ID，直接返回全量原始产品数据
    this.productArray = [...this.arrays];
  } else {
    // 有选中的ID，从原始数据里筛选符合条件的所有产品
    this.productArray = this.arrays.filter(item => this.selectedIds.includes(item.id));
  }
}

额外优化建议 #

• 建议把原始产品数据存在一个只读变量里，每次筛选都从原始数据中取数，避免操作过程中污染原始数据源
• 后续可直接删除原有逻辑里没用的tempArray、newArray变量，精简代码

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