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

Question

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

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
    
    
}

Answer 1

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

onGridReady: function (params)
{
   params.api.showLoadingOverlay();
   setTimeout(() => {
      params.api.setRowData(this.rowData);
   }, 500);
},

需要注意的一点是，ag-grid 会尽可能在内部为您处理叠加层，因此您不必在获取数据时调用 GridApi.hideOverlay()。

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

How to use showLoadingOverlay in ag grid during ngoninit

typescript

ag-grid

ngoninit

angular

Live Demo