Angular中AG Grid过滤无匹配行时showNoRowsOverlay不生效求助

核心问题点 #

1. 异步更新导致判断时机错误
   调用setGridOption("quickFilterText")后，AG Grid不会立刻完成过滤并更新显示行数，此时直接调用getDisplayedRowCount()拿到的是过滤前的数值，自然无法正确触发无数据覆盖层。

2. 多余的rowData重置操作
   else分支中this.gridApi.setGridOption('rowData', this.rowData)完全没必要，该操作会强制网格重新加载原始数据，反而会破坏当前的过滤状态，甚至导致过滤效果失效。

正确实现方式 #

方式1：利用网格的modelUpdated事件判断 #

监听网格的数据模型更新事件，在过滤完成后再判断显示行数并控制覆盖层：

首先在组件模板中给AG Grid添加事件绑定：

<ag-grid-angular
  ...
  (modelUpdated)="onModelUpdated()"
></ag-grid-angular>

然后修改组件代码：

onFilterTextBoxChanged(event: Event) {
  const filterValue = (document.getElementById("filter-text-box") as HTMLInputElement).value;
  this.gridApi.setGridOption("quickFilterText", filterValue);
}

onModelUpdated() {
  if (this.gridApi.getDisplayedRowCount() === 0) {
    this.gridApi.showNoRowsOverlay();
  } else {
    this.gridApi.hideOverlay(); // 有数据时隐藏覆盖层
  }
}

方式2：配置自定义无数据覆盖层（更简洁） #

AG Grid支持通过配置自动显示无数据覆盖层，不需要手动调用API，只需定义覆盖层组件并在网格配置中启用：

1. 定义自定义无数据组件：

import { Component } from '@angular/core';

@Component({
  template: `<div class="ag-overlay-no-rows-center">No Data Found</div>`
})
export class CustomNoRowsOverlayComponent {}

2. 在AG Grid模块中声明该组件，并在网格配置中指定：

import { CustomNoRowsOverlayComponent } from './custom-no-rows-overlay.component';

// 组件类中
gridOptions: GridOptions = {
  ...
  noRowsOverlayComponent: CustomNoRowsOverlayComponent,
  // 可选：如果需要传递参数给组件
  // noRowsOverlayComponentParams: { message: 'No Data Found' }
};

这样AG Grid会自动在没有显示行的时候展示自定义的无数据提示，无需手动控制覆盖层的显示隐藏，逻辑更简洁可靠。

内容的提问来源于stack exchange，提问作者Maa Henna Art by Sakshee