Angular项目移除ag-grid数据项时过滤器被自动清除如何解决

核心说明 #

不要尝试阻断core.mjs中onLeave(zone)方法的执行，该逻辑是Angular Zone接管异步任务、收尾变更检测的核心内置逻辑，强行拦截会导致整个应用变更检测失效、视图不更新等连锁问题。
过滤器被清除的根本原因是：你在异步订阅回调里更新数据源、手动重设过滤器的操作，全部运行在当前Zone任务的执行阶段，等finally块触发onLeave、当前变更检测周期完全收尾后，ag-grid监测到数据源全量变更，会触发内置的默认状态重置逻辑，把你之前设置的过滤器覆盖掉，和onLeave本身没有直接关系。

可落地的解决方案 #

• 方案1：错开Zone执行周期重设过滤器
  借助NgZone和零延迟定时器，让过滤器重设逻辑在当前Zone任务完全执行完毕、onLeave运行结束后再触发，就不会被后续的网格重置逻辑覆盖。
  先在组件中注入NgZone：

  import { NgZone } from '@angular/core';
  // 构造函数注入
  constructor(
    private ngZone: NgZone,
    private taskService: TaskService
  ) {}
  

  修改业务回调代码：

  this.taskService.complete(task).subscribe(response => {                   
    this.tasks = this.tasks.filter(x => x.TaskId !== response.TaskID);
    // 将过滤器重设逻辑挪到当前Angular Zone周期外执行
    this.ngZone.runOutsideAngular(() => {
      setTimeout(() => {
        // 替换为你自己的过滤器设置逻辑
        this.setFilter();
      }, 0);
    });
  });
  

• 方案2：使用ag-grid事务更新API替代全量数据源赋值
  直接替换绑定的tasks数组会触发ag-grid全量重绘，默认会重置过滤器、排序等网格状态。用官方提供的行事务更新接口，精准移除目标行，不会触发不必要的状态重置，也不需要手动重设过滤器：

  this.taskService.complete(task).subscribe(response => {
    // 调用网格API执行行删除事务
    this.gridApi.applyTransaction({
      remove: this.tasks.filter(x => x.TaskId === response.TaskID)
    });
    // 同步更新本地数据源即可
    this.tasks = this.tasks.filter(x => x.TaskId !== response.TaskID);
  });
  

  该方案是ag-grid官方推荐的局部数据更新方式，性能远高于全量替换数据源，大数量级下优势尤其明显。

• 方案3：开启网格过滤器状态记忆配置
  在ag-grid初始化配置中开启状态记忆开关，数据源更新时网格会自动保留已设置的过滤器状态，无需手动重设：

  const gridOptions: GridOptions = {
    // 其余你的原有配置...
    // 开启数据源更新时的过滤器状态记忆
    rememberFilterStateWhenUpdating: true
  };
  

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