Angular 12移除数组指定元素异常：误删最后一个元素而非目标元素

嘿，这个问题我太熟了！你遇到的情况完全是因为Array.splice()方法的用法不对导致的，咱们一步步把它捋清楚：

问题根源 #

你现在写的代码是：

this.items.splice(this.items.indexOf(id));

splice方法的完整语法是 array.splice(startIndex, deleteCount, ...itemsToAdd)，其中第二个参数deleteCount是核心——如果不传这个参数，默认会从startIndex开始删除数组里剩余的所有元素。

更糟的是，如果this.items.indexOf(id)返回-1（比如找不到匹配的id，或者id的类型不匹配，比如数组里存的是数字但传过来的是字符串），splice(-1)就会删除数组的最后一个元素——这正好是你遇到的诡异现象！

正确的解决方案 #

1. 修正splice的调用方式 #

必须传入第二个参数1，表示只删除找到的那一个元素，同时先判断索引是否有效，避免无效操作：

removeItems(id: number | string) {
  const targetIndex = this.items.indexOf(id);
  // 确保找到有效索引再执行删除
  if (targetIndex !== -1) {
    this.items.splice(targetIndex, 1);
  }
}

2. 额外注意：类型匹配问题 #

要确保模板里传递的item.Id和数组中元素的id类型完全一致！比如如果数组里的id是number类型，但item.Id是string类型，indexOf就会找不到元素，还是会触发index=-1的错误情况。可以做个简单的类型转换，比如：

<span class="close" style="cursor: pointer;" (click)="removeItems(+item.Id)"> 
  <i class="far fa-trash-alt fa-2x" style="color: red;"></i> 
</span>

（+item.Id是把字符串快速转成数字的写法，根据你的实际数据类型调整即可）

验证效果 #

现在当你点击删除第一个元素时，indexOf会找到它的索引（比如0），然后splice(0,1)就只会精准删除第一个元素，不会再误删最后一项啦！

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