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

问题描述

我正在使用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
    
    
}

解决方法

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

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

一个小小的注意事项是，如果可能的话，ag-grid会尝试在内部为您处理叠加层，因此在获取数据时不必调用GridApi.hideOverlay()。

ag-grid angular typescript typescript