Angular绑定数组删除行后表格未刷新，如何解决？

看起来你遇到的是Angular变更检测和纯管道结合导致的视图不更新问题，核心原因在于：

1. 你使用的filter管道（应该是自定义的纯管道吧？Angular官方并没有内置filter管道）是纯管道，纯管道的特性是只有当输入参数的引用发生变化时，才会重新执行过滤逻辑。
2. 你用Array.splice(id, 1)删除数组元素时，只是修改了原数组的内容，数组本身的引用并没有改变，所以纯管道不会重新运行，过滤后的结果还是原来的旧数据，导致视图没有更新。

下面给你几个可行的解决方案：

方案一：创建新数组来改变引用（推荐） #

把修改原数组的方式改成创建新数组替换原数组，这样数组的引用发生变化，纯管道会自动重新执行，触发视图更新：

remove(id: number) {
  this.deleteddrow = []
  if(this.users[id] != null){
    this.deleteddrow.push(this.users[id]);
    // 使用filter创建新数组，过滤掉要删除的元素
    this.users = this.users.filter((_, index) => index !== id);
    // 也可以用扩展运算符+slice实现：
    // this.users = [...this.users.slice(0, id), ...this.users.slice(id + 1)];
  }
}

方案二：手动触发变更检测 #

如果一定要保留splice修改原数组的方式，可以注入ChangeDetectorRef手动触发变更检测，通知Angular更新视图：

// 先导入ChangeDetectorRef
import { ChangeDetectorRef } from '@angular/core';

// 在组件构造函数中注入
constructor(private cdr: ChangeDetectorRef) {}

remove(id: number) {
  this.deleteddrow = []
  if(this.users[id] != null){
    this.deleteddrow.push(this.users[id]);
    this.users.splice(id, 1);
    // 手动触发变更检测
    this.cdr.detectChanges();
  }
}

方案三：将管道改为非纯管道（不推荐） #

你可以把自定义的filter管道改为非纯管道，这样它会在每个变更检测周期都重新执行：

@Pipe({
  name: 'filter',
  pure: false // 将纯管道改为非纯
})
export class FilterPipe implements PipeTransform {
  // 你的管道转换逻辑
  transform(value: any[], ...args: any[]): any[] {
    // ...
  }
}

⚠️ 注意：非纯管道会频繁执行，可能带来性能问题，除非必要不建议使用。

额外优化建议 #

你的*ngFor使用了index作为元素标识，当数组元素被删除后，后续元素的index会发生变化，可能导致一些潜在问题。建议利用UserModel中的唯一uId添加trackBy函数，优化Angular的DOM更新效率：

1. 在组件中添加trackBy函数：

trackByUserId(index: number, user: UserModel): number {
  return user.uId; // 使用用户唯一ID作为追踪标识
}

2. 在模板中修改*ngFor：

<tr *ngFor="let user of users | filter : usersProperties : searchString; trackBy: trackByUserId; let id = index">

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