AgGrid获取显示行数报错：无法读取undefined的getDisplayedRowCount属性

嘿，这个问题我碰到过好多次啦！核心原因很简单：你在ngOnInit里调用方法的时候，AgGrid的api对象还没准备好呢。

为什么会报错？ #

Angular的ngOnInit钩子只是告诉你组件本身初始化完了，但AgGrid的渲染和api实例化是异步的——这时候this.gridOptions.api还处于undefined状态，自然没法调用它的方法啦。

正确的解决办法（官方推荐） #

AgGrid专门提供了gridReady事件，这个事件会在网格完全初始化、api彻底可用的时候触发，用它就准没错：

1. 在模板里绑定gridReady事件
   给你的ag-grid-angular组件加上这个事件绑定：

   <ag-grid-angular
     [rowData]="yourRowData"
     [columnDefs]="yourColumnDefs"
     ...其他配置项...
     (gridReady)="onGridReady($event)"
   ></ag-grid-angular>
   

2. 在组件类里实现onGridReady方法
   在这里你可以安全地获取api，然后调用你需要的方法：

   private gridApi: any;
   
   onGridReady(params: any) {
     // 先把api存起来，以后其他地方也能用
     this.gridApi = params.api;
     // 现在调用getDisplayedRowCount就不会报错啦
     console.log(this.gridApi.getDisplayedRowCount());
   }
   

应急方案（不推荐，仅作参考） #

如果某些特殊场景下你非得在ngOnInit里尝试，那可以用setTimeout延迟一下，给AgGrid足够的初始化时间，但这种方法不太可靠，不同环境下可能需要调整延迟时长：

ngOnInit() {
  setTimeout(() => {
    if (this.gridOptions.api) {
      console.log(this.gridOptions.api.getDisplayedRowCount());
    }
  }, 500); // 时间根据你的实际情况调整
}

小提醒 #

尽量用gridReady事件哦，这是AgGrid官方推荐的获取api的方式，能百分百保证api已经初始化完成，后续不管是做行操作还是列操作都很靠谱～

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