Angular AG Grid筛选数据时行内自定义组件消失问题排查

1. 未配置行唯一标识（最常见原因） #

AG Grid默认靠行对象的引用识别行，当你通过filteredData返回新数组时，哪怕行内容一样，引用变了就会被当成全新行，导致自定义组件无法关联原有状态。

解决方法：
给ag-grid-angular配置rowId属性，指定数据里的唯一字段（比如id），让AG Grid用这个字段值识别行，而非对象引用。

修改后的AG Grid代码：

<ag-grid-angular 
    style="width: 100%; height: 350px;"
    class="ag-theme-alpine-dark"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [rowId]="'id'" <!-- 替换成你数据里的唯一字段名 -->
/>

2. 自定义组件未正确实现AG Grid接口 #

如果你的自定义列组件是Angular组件，必须实现ICellRendererAngularComp接口，并且正确编写agInit和refresh方法——尤其是refresh方法，返回false会让AG Grid销毁旧组件重创建，容易导致组件消失。

示例组件代码：

import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';

export class YourCustomComponent implements ICellRendererAngularComp {
  params: ICellRendererParams;

  agInit(params: ICellRendererParams): void {
    this.params = params;
    // 初始化逻辑
  }

  refresh(params: ICellRendererParams): boolean {
    // 更新组件内部参数，返回true表示无需重创建组件
    this.params = params;
    // 同步组件显示数据
    return true;
  }
}

同时要确保在模块里注册组件：

@NgModule({
  declarations: [YourCustomComponent],
  imports: [AgGridModule.withComponents([YourCustomComponent])]
})
export class YourModule {}

3. ColumnDefs引用不稳定 #

如果每次过滤时都重新生成columnDefs数组（比如在filteredData方法里新建数组），AG Grid会重新初始化所有列，导致自定义组件丢失。

解决方法：
在组件初始化时只创建一次columnDefs，保持引用稳定。如果需要动态改列，直接修改现有列的属性，不要重生成整个数组。

示例初始化代码：

ngOnInit(): void {
  this.columnDefs = [
    { 
      headerName: '自定义列', 
      field: 'customField', 
      cellRenderer: 'yourCustomComponent'
    },
    // 其他列定义
  ];
}

4. 过滤后数据结构异常 #

检查filteredData返回的数据是否和原始rowData结构完全一致。如果过滤后的数据缺失了自定义组件依赖的字段，会导致组件初始化失败直接消失。

5. 手动触发AG Grid刷新 #

如果上述方法都没用，可尝试在rowData更新时手动触发单元格刷新：

在data-grid组件里：

import { AgGridAngular } from 'ag-grid-angular';
import { ViewChild } from '@angular/core';

export class DataGridComponent {
  @ViewChild(AgGridAngular) agGrid!: AgGridAngular;
  private _rowData: any[] = [];

  @Input() set rowData(data: any[]) {
    this._rowData = data;
    // 延迟触发刷新，确保数据已更新
    setTimeout(() => {
      this.agGrid.api.refreshCells({
        force: true,
        columns: ['customColumn'] // 可指定只刷新自定义列
      });
    });
  }
}

内容的提问来源于stack exchange，提问作者freakinu