Angular版Ag Grid数据加载完成后设置过滤器不生效

可能的问题点及对应解决方案 #

1. 列定义未启用文本过滤器 #

首先确认lastUpdatedByUserName列的配置中，是否明确开启了文本类型过滤器。如果列没配置过滤功能，设置过滤模型自然不会生效：

// 列定义示例
columnDefs = [
  { 
    field: 'lastUpdatedByUserName', 
    filter: 'agTextColumnFilter', // 必须指定文本过滤器类型
    filterParams: {
      caseSensitive: false // 可选：根据需求配置是否区分大小写
    }
  },
  // 其他列配置...
];

2. 过滤时机不对：数据未完全加载 #

onFirstDataRendered仅在网格第一次渲染数据时触发，但如果你的数据是异步从API获取，这个事件可能在数据未完全加载完成时就执行了。建议在数据加载完成后再设置过滤：

// 组件中获取数据并设置过滤
gridApi: GridApi<MyInterface> | undefined;

ngOnInit() {
  this.dataService.fetchData().subscribe(rowData => {
    this.rowData = rowData;
    // 等待网格处理完新数据后设置过滤
    setTimeout(() => this.setEmptyUserFilter(), 0);
  });
}

// gridReady事件保存API引用
onGridReady(params: GridReadyEvent<MyInterface>) {
  this.gridApi = params.api;
}

private setEmptyUserFilter() {
  if (!this.gridApi) return;

  // 确认EMPTY_RESPONSE_VALUE与数据中空值类型完全匹配（空字符串/ null/ undefined）
  void this.gridApi.setColumnFilterModel('lastUpdatedByUserName', {
    filterType: 'text',
    type: 'equals',
    filter: EMPTY_RESPONSE_VALUE
  });
  // 无需手动调用onFilterChanged，setColumnFilterModel完成后会自动触发过滤
}

3. EMPTY_RESPONSE_VALUE 类型不匹配 #

检查EMPTY_RESPONSE_VALUE的值是否与数据中lastUpdatedByUserName的空值类型完全一致：

• 如果数据中空值是''（空字符串），则EMPTY_RESPONSE_VALUE设为''
• 如果是null或undefined，对应设置相同类型的值，类型不匹配会导致过滤规则失效

4. 替代方案：监听数据变化事件 #

如果上述方法仍有问题，可以通过监听rowDataChanged事件，确保数据更新后再应用过滤：

onGridReady(params: GridReadyEvent<MyInterface>) {
  this.gridApi = params.api;
  // 监听数据变化事件
  params.api.addEventListener('rowDataChanged', () => {
    this.setEmptyUserFilter();
  });
}

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