ag-grid中onFilterModified触发后视图未更新可见行数求助

看起来你遇到的核心问题是过滤后的行数能在控制台打印，但绑定的noOfRowsVisible变量无法同步到视图，这大概率是响应式更新机制或者变量赋值方式的问题。我给你分情况梳理下可行的解决办法：

1. 先确认行数获取的API是否正确 #

首先要确保你用的是ag-grid官方推荐的获取显示行数的API：params.api.getDisplayedRowCount()，这个方法会返回经过过滤、分页后的实际显示行数。你说控制台能拿到值，这一步应该没问题，但还是确认下避免用错API（比如误用了getRowCount()，这个会返回所有总行数，不管过滤）。

2. 根据你使用的框架调整变量更新方式 #

不同前端框架的响应式逻辑不一样，这里针对常见框架给出调整方案：

Vue 2 #

要确保noOfRowsVisible是在组件的data()中声明的响应式变量，直接赋值即可触发视图更新：

data() {
  return {
    noOfRowsVisible: 0
  }
},
onFilterModified(params) {
  this.noOfRowsVisible = params.api.getDisplayedRowCount();
}

如果是后期动态添加的属性，记得用Vue.set(this, 'noOfRowsVisible', params.api.getDisplayedRowCount())来触发响应式。

Vue 3 #

如果你用ref声明变量，赋值时必须操作.value属性，否则无法触发响应式更新：

import { ref } from 'vue';

const noOfRowsVisible = ref(0);
const onFilterModified = (params) => {
  noOfRowsVisible.value = params.api.getDisplayedRowCount();
}

React #

React中必须通过state setter函数更新变量，不能直接赋值：

import { useState } from 'react';

const [noOfRowsVisible, setNoOfRowsVisible] = useState(0);
const onFilterModified = (params) => {
  setNoOfRowsVisible(params.api.getDisplayedRowCount());
}

Angular #

如果你的组件使用了ChangeDetectionStrategy.OnPush变更检测策略，更新变量后需要手动触发变更检测：

import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
  noOfRowsVisible = 0;

  constructor(private cdr: ChangeDetectorRef) {}

  onFilterModified(params) {
    this.noOfRowsVisible = params.api.getDisplayedRowCount();
    this.cdr.detectChanges(); // 手动触发视图更新
  }
}

3. 检查视图绑定是否正确 #

确认HTML中的绑定语法和框架匹配，并且变量名没有拼写错误：

• Vue：{{ noOfRowsVisible }}
• React：{noOfRowsVisible}
• Angular：{{ noOfRowsVisible }}

4. 极端情况排查（如果以上都无效） #

偶尔会出现ag-grid事件触发时机和DOM更新不同步的情况，可以尝试用setTimeout包裹赋值逻辑，让它在事件循环的下一轮执行：

onFilterModified(params) {
  setTimeout(() => {
    this.noOfRowsVisible = params.api.getDisplayedRowCount();
  }, 0);
}

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