AgGrid：更新rowData后如何触发forEachNodeAfterFilter且不修改过滤字符串

你的问题核心在于：刷新rowData后，网格的过滤操作是异步执行的，如果你立刻调用forEachNodeAfterFilter，此时新数据还没完成过滤处理，所以拿到的行数不准确。

下面提供几种可靠的解决方式，按推荐程度排序：

1. 使用ag-Grid内置的getDisplayedRowCount()方法+modelUpdated事件 #

ag-Grid已经提供了直接获取当前显示行数的API，同时利用modelUpdated事件确保在网格所有数据操作（过滤、排序、数据刷新）完成后更新数值，这是最简洁高效的方式：

代码示例： #

// 在组件初始化时绑定事件（比如Angular的ngOnInit，React的useEffect，Vue的onMounted）
initGridEvents() {
  this.gridApi?.addEventListener('modelUpdated', this.updateDisplayedRowCount);
}

// 定义更新行数的方法
updateDisplayedRowCount = () => {
  // 直接用内置API获取显示行数，无需手动循环计数
  this.numberToShow = this.gridApi.getDisplayedRowCount();
};

// 组件销毁时移除监听，避免内存泄漏
cleanupGridEvents() {
  this.gridApi?.removeEventListener('modelUpdated', this.updateDisplayedRowCount);
}

// 刷新按钮的点击逻辑
onRefreshButtonClick() {
  // 假设你通过接口获取新数据
  this.fetchUpdatedRowData().then(newData => {
    this.rowData = newData;
    // 通知网格更新数据（如果是双向绑定可能不需要，但显式调用更可靠）
    this.gridApi?.setRowData(newData);
  });
}

2. 手动循环计数（兼容旧版本ag-Grid） #

如果你使用的ag-Grid版本没有getDisplayedRowCount()，可以保留你原来的循环方式，但同样要在modelUpdated事件中执行：

updateDisplayedRowCount = () => {
  let filteredRowCount = 0;
  this.gridApi.forEachNodeAfterFilter(() => {
    filteredRowCount++;
  });
  this.numberToShow = filteredRowCount;
};

3. 在setRowData的回调中执行计数 #

setRowData方法支持传入回调函数，会在数据更新完成后执行，你也可以用这种方式：

onRefreshButtonClick() {
  this.fetchUpdatedRowData().then(newData => {
    this.gridApi?.setRowData(newData, () => {
      // 数据更新完成后计算行数
      this.numberToShow = this.gridApi.getDisplayedRowCount();
    });
  });
}

为什么之前的方法失效？ #

当你刷新rowData时，ag-Grid会异步完成数据渲染、过滤、排序等操作，这时候立刻调用forEachNodeAfterFilter，网格还没处理完新数据的过滤逻辑，所以拿到的是旧的或者未过滤的行数。而modelUpdated事件会在所有数据处理流程结束后触发，此时计算的数值才是准确的。

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