如何仅隐藏ag-grid-angular的加载覆盖层而保留无数据覆盖层？

开发者阿泽

2026-6-28

问题解答

核心结论

hideOverlay() 方法会同时隐藏所有类型的覆盖层（包括加载覆盖层、无数据覆盖层，以及自定义的任何覆盖组件），直接调用它会把你想保留的无数据覆盖层也关掉，不符合需求。

解决方案

方案1：手动维护加载状态（推荐）

既然用了自定义加载覆盖组件，完全可以自己控制它的显示/隐藏，不依赖ag-grid的自动机制：

在组件类里定义一个状态变量，比如 isLoading = true
在自定义加载覆盖组件的模板中，用 *ngIf="isLoading" 控制组件的显示
数据加载完成后，将 isLoading 设为 false，加载覆盖层会自动隐藏，且不会干扰ag-grid原生的无数据覆盖层逻辑（ag-grid会根据数据有无自动显示无数据覆盖层）

方案2：基于ag-grid API精准切换

如果一定要用ag-grid的API控制，可以在数据加载完成后做判断：

// 在dataRendered钩子或数据加载完成的回调中执行
onDataRendered() {
  const rowCount = this.gridApi.getDisplayedRowCount();
  this.gridApi.hideOverlay(); // 先统一隐藏所有覆盖层
  if (rowCount === 0) {
    this.gridApi.showNoRowsOverlay(); // 无数据时重新显示无数据覆盖层
  }
}

这种方式先统一隐藏，再根据数据情况决定是否重新显示无数据覆盖层，能实现你要的效果。