Angular中使用splice从BehaviorSubject数组删除元素时误删问题求助

你遇到的问题核心是对Array.splice()的返回值理解有误，另外还有数组引用的小细节需要注意，我来一步步给你拆解：

1. 为什么删除后得到错误的结果？ #

先看你的deleteUser方法：

deleteUser(deletedUser: User): void { 
  const users: User[] = this.getUsers(); 
  const index: number = users.findIndex(user => { return user.id === deletedUser.id; }); 
  this.setUsers(users.splice(index, 1)); 
}

users.splice(index, 1)的返回值不是修改后的数组，而是被删除的元素组成的数组。比如你删除id=1的John时，splice(0,1)会返回[{ id: 1, name: 'John Doe' }]，然后你把这个数组传给了setUsers，这就导致BehaviorSubject里最终只保留了被删除的元素，完全搞反了！

2. 正确的写法应该是怎样的？ #

我们需要先执行splice修改原数组（splice会直接改变调用它的数组），然后把修改后的数组传给setUsers。同时为了避免直接操作BehaviorSubject内部的数组引用，建议先克隆数组：

deleteUser(deletedUser: User): void { 
  // 克隆数组，避免直接修改BehaviorSubject的内部状态引用
  const users: User[] = [...this.getUsers()]; 
  const index: number = users.findIndex(user => user.id === deletedUser.id); 

  // 加个判断，防止找不到对应id的元素时报错
  if (index !== -1) {
    // 执行splice修改数组（此时users已经变成删除后的结果）
    users.splice(index, 1); 
    // 把修改后的完整数组传给setUsers
    this.setUsers(users); 
  }
}

另外你的setUsers方法参数名大小写有点不一致，建议统一成小写，避免混淆：

setUsers(users: User[]): void { 
  this.users$.next(users); 
}

3. 验证示例场景 #

当你传入John Doe（id=1）调用deleteUser时：

• 克隆后的数组是[{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Doe' }]
• findIndex找到index=0
• users.splice(0,1)会把index=0的元素删除，此时users变成[{ id: 2, name: 'Jane Doe' }]
• 调用setUsers(users)后，BehaviorSubject会发出这个正确的数组，其他监听的组件就能拿到正确的结果了

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