如何在 ngoninit 期间在 ag 网格中使用 showLoadingOverlay

Posted 2023-03-13

【中文标题】如何在 ngoninit 期间在 ag 网格中使用 showLoadingOverlay

【英文标题】：How to use showLoadingOverlay in ag grid during ngoninit

【发布时间】：2020-12-18 17:24:53

【问题描述】：

我正在使用 ag 网格在我的一个应用程序中显示表格。在应用程序初始化期间加载数据时，我无法看到加载消息。下面是我的代码，

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: function (params)
    
        params.api.setRowData(this.rowData);
        params.api.showLoadingOverlay();
        
    ,
    onFirstDataRendered(params)
    
        params.api.sizeColumnsToFit();
    ,
    defaultColDef: 
        flex: 1,
        minWidth: 100,
        resizable: true,
        headerCheckboxSelection: this.isFirstColumn,
        checkboxSelection: this.isFirstColumn,
      ,
      suppressRowClickSelection: true,
      rowSelection: 'multiple',
;


    //var user_from_date = this.fromDate
    
    

【参考方案1】：

在您的代码中，您在网格准备好时设置行数据，这意味着 ag-grid 将在初始化 API 后立即显示数据，这就是您看不到任何加载的原因。如果你稍微延迟一下，你可能会看到加载覆盖。

onGridReady: function (params)

   params.api.showLoadingOverlay();
   setTimeout(() => 
      params.api.setRowData(this.rowData);
   , 500);
,

需要注意的是，如果可能，ag-grid 会尝试在内部为您处理覆盖，因此您不必在获取数据时调用 GridApi.hideOverlay()。

Live Demo

【讨论】：

this.gridApi.refreshInfiniteCache()有什么用，能不能也一样