首先,在Ag-grid组件中设置loadingCellRenderer为你想要的加载信息。例如:
gridOptions: {
loadingCellRenderer: function(params) {
return '
';
}
}
然后,在Ag-grid组件的onGridReady事件中,手动显示和隐藏加载信息。例如:
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
// 显示加载信息
params.api.showLoadingOverlay();
// 加载数据
this.myService.getData().subscribe(
data => {
// 隐藏加载信息
params.api.hideOverlay();
params.api.setRowData(data);
},
error => {
// 隐藏加载信息
params.api.hideOverlay();
}
);
}
在加载数据之前,手动显示Ag-grid的加载信息;当数据加载完成或失败后,手动隐藏加载信息。这样就可以在Ag-grid中显示自定义的加载信息了。