ag-grid初始化时GridReady事件未触发，gridApi未初始化无法导出CSV

核心问题：模板语法错误 #

你的<ag-grid-angular>标签提前闭合了，导致[autoGroupColumnDef]和(onGridReady)这两个属性并未被绑定到组件上，这是onGridReady事件不触发的直接原因。

修正后的模板代码：

<ag-grid-angular 
    #myGrid
    style="width: 500px; height: 350px;"
    class="ag-theme-alpine"
    [rowData]="rowData"
    [sideBar]="true"
    [suppressExcelExport]="true"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [autoGroupColumnDef]="autoGroupColumnDef"
    (onGridReady)="onGridReady($event)">
</ag-grid-angular>

<button (click)="onBtnExport()">Download CSV export file</button>

其他优化与排查点 #

• 规范gridApi声明：在组件类中明确声明类型，增加判空避免报错：

  import { GridApi } from 'ag-grid-angular';
  
  // 组件类中
  private gridApi?: GridApi;
  
  onGridReady = (params: { api: GridApi }) => {
    this.gridApi = params.api;
  }
  
  onBtnExport(): void {
    if (this.gridApi) {
      this.gridApi.exportDataAsCsv();
    }
  }
  

• 检查依赖与模块导入：确保已正确安装ag-grid依赖，且在根模块导入AgGridModule.forRoot()：

  import { AgGridModule } from 'ag-grid-angular';
  
  @NgModule({
    imports: [
      // ...其他模块
      AgGridModule.forRoot()
    ]
  })
  export class AppModule { }
  

• 异步rowData处理：如果rowData是通过接口异步获取的，确保数据加载完成后再渲染grid，或通过gridApi.setRowData()手动设置数据，避免因无数据导致grid未完成初始化。

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