Angular 8 取消勾选checkbox时删除数组指定元素失效问题求助

代码存在的核心问题 #

• 参数拼写错误：函数入参命名为arry，但循环时调用了未定义的array变量，直接导致逻辑执行报错
• 匹配字段不匹配：你的数组对象唯一标识是cID，但判断条件中使用了不存在的testID字段，永远无法命中要删除的目标项
• 遍历逻辑缺陷：使用forEach遍历数组的同时调用splice删除元素，会导致数组长度实时变化、索引偏移，出现漏遍历、错删的异常

推荐修复方案（使用filter，性能更稳定、符合Angular变更检测逻辑） #

直接通过数组过滤方法生成新数组赋值即可，不需要修改原数组，避免索引问题：

// 删除方法简化为
removeFromArray(targetArray: any[], deleteItem: any) {
  // 过滤掉cID和待删除项一致的元素，返回新数组
  return targetArray.filter(item => item.cID !== deleteItem.cID);
}

调用逻辑调整：

if (event.selectAll !== null ) {
  // 直接将过滤后的新数组赋值给原数组变量，触发Angular视图更新
  this.SourceArrayData = this.removeFromArray(this.SourceArrayData, arrayObject);
}

如果你需要坚持修改原数组的实现 #

可以先找到目标项的索引再单独删除，避免遍历过程修改数组：

removeFromArray(targetArray: any[], deleteItem: any) {
  const delIndex = targetArray.findIndex(item => item.cID === deleteItem.cID);
  if (delIndex > -1) {
    targetArray.splice(delIndex, 1);
  }
  return targetArray;
}

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