Angular2 AgGrid加载时行数统计异常问题求助

这个问题我之前也碰到过，核心原因是AgGrid设置rowData后不会立刻完成数据渲染——你在http订阅回调里直接调用countOnSelectionChanged()时，Grid还没来得及把新的rowData加载并渲染到界面上，所以getDisplayedRowCount()返回的还是初始的0。而当你点击复选框触发onSelectionChanged时，Grid已经完成了数据渲染，自然能拿到正确的行数。

下面给你两种靠谱的解决方法：

方法1：监听rowDataChanged事件（推荐） #

AgGrid提供了rowDataChanged事件，会在Grid完成rowData的更新和渲染后触发。你可以在onGridReady里注册这个事件，然后在事件回调中调用统计方法：

onGridReady(params) { 
  this.gridApi = params.api; 
  this.gridColumnApi = params.columnApi; 

  // 注册rowDataChanged事件监听
  params.api.addEventListener('rowDataChanged', () => {
    this.countOnSelectionChanged();
  });

  this.http.get(this.config.getUrl('myProject')).subscribe(data => { 
    this.columnDefs = data['headers']; 
    this.rowData = data['datas']; 
    params.api.sizeColumnsToFit(); 
  }); 
}

这样就能保证在Grid完全处理完新数据后再统计行数，拿到的totalResults就是正确的数值了。

方法2：使用gridApi.forEachNodeAfterFilterAndSort（适合需要立即统计的场景） #

如果不想依赖事件监听，也可以直接遍历Grid的节点来统计行数，这种方式不依赖渲染状态：

修改你的countOnSelectionChanged方法：

countOnSelectionChanged() { 
  console.log('here'); 
  this.selectedResults = this.gridApi.getSelectedRows().length; 
  // 改用遍历节点的方式统计显示行数
  let displayedCount = 0;
  this.gridApi.forEachNodeAfterFilterAndSort(() => {
    displayedCount++;
  });
  this.totalResults = displayedCount;
  console.log('totalResults', this.totalResults); 
  console.log('selectedResults', this.selectedResults); 
}

不过这种方式更适合特殊场景，还是方法1的事件监听更符合AgGrid的设计逻辑。

另外要注意：如果你是通过双向绑定[rowData]="rowData"来给Grid传数据，AgGrid会自动触发rowDataChanged事件；如果是手动调用gridApi.setRowData()，也要确保调用后Grid有足够时间处理数据。

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