如何在ngOnInit中使用AG Grid的showLoadingOverlay加载提示

我帮你排查了代码里的问题，核心原因是onGridReady的函数上下文错误加上加载提示的调用时机不对，下面给你一步步修复：

1. 先修复onGridReady的this指向 #

你在onGridReady里用了普通function(params)，这里的this并不指向你的Angular组件实例，而是gridOptions对象本身，所以this.rowData其实是undefined，而且后续调用showLoadingOverlay的时机也没踩对。

把普通函数改成箭头函数，就能正确绑定组件的this了：

onGridReady: (params) => {
  // 先显示加载提示
  params.api.showLoadingOverlay();
  // 这里替换成你实际的异步数据请求逻辑
  setTimeout(() => {
    params.api.setRowData(this.rowData);
    // 数据加载完成后，AG Grid会自动隐藏加载提示，也可以手动调用hideOverlay()
  }, 1000);
},

2. 优化加载提示的模板 #

你原来的overlayLoadingTemplate用了HTML转义字符，其实在TypeScript里直接用模板字符串写正常HTML更清晰，不用转义：

overlayLoadingTemplate: `<span class="ag-overlay-loading-center">Please wait while your rows are loading</span>`,

3. 完整的修复后代码示例 #

ngOnInit() { 
  this.gridOptions = { 
    columnDefs: this.columnDefs, 
    overlayLoadingTemplate: `<span class="ag-overlay-loading-center">Please wait while your rows are loading</span>`, 
    rowData: [], 
    enableCellChangeFlash: true, 
    onGridReady: (params) => { 
      // 网格就绪后立刻显示加载提示
      params.api.showLoadingOverlay();
      // 模拟异步数据请求，替换成你实际的API调用
      this.loadGridData().then(fetchedData => {
        params.api.setRowData(fetchedData);
        // 数据加载完成后，AG Grid会自动隐藏加载层，也可以手动调用：
        // params.api.hideOverlay();
      });
    }, 
    onFirstDataRendered: (params) => { 
      params.api.sizeColumnsToFit(); 
    }, 
    defaultColDef: { 
      flex: 1, 
      minWidth: 100, 
      resizable: true, 
      headerCheckboxSelection: this.isFirstColumn, 
      checkboxSelection: this.isFirstColumn, 
    }, 
    suppressRowClickSelection: true, 
    rowSelection: 'multiple', 
  }; 
}

// 模拟你的数据加载函数
private loadGridData(): Promise<any[]> {
  return new Promise(resolve => {
    // 模拟网络请求延迟
    setTimeout(() => {
      // 这里替换成你实际获取到的行数据
      resolve([
        // 示例数据：{ id: 1, name: "Test Item" }
      ]);
    }, 1500);
  });
}

额外注意点 #

• 如果你的rowData是同步获取的（初始化时就有数据），加载提示可能会一闪而过，因为数据瞬间就设置好了，这种情况可以不用显示加载提示，或者加个短延迟测试效果。
• 要确保AG Grid的样式文件正确引入了，不然ag-overlay-loading-center的样式可能不生效，导致你看不到提示内容。

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