Angular项目升级Ag-grid至v31后自定义筛选组件默认异常显示的问题

我之前升级Ag-grid版本时也碰到过类似的诡异问题，结合v28到v31的版本变更和你的场景，给你几个实用的排查和解决方向：

1. 调整设置筛选模型的时机 #

从v30开始，Ag-grid对筛选组件的渲染逻辑做了优化，之前未激活的筛选组件是延迟渲染，现在改成了提前挂载但默认隐藏。如果在网格还没完全渲染好时就调用setFilterModel，很容易误触组件的显示状态。

建议不要在gridReady事件里直接执行设置逻辑，换成监听firstDataRendered事件（网格首次渲染完成的信号），或者用短延迟的setTimeout兜底：

// 推荐用firstDataRendered事件
this.gridApi.addEventListener('firstDataRendered', () => {
  const savedFilterModel = localStorage.getItem('your-filter-storage-key');
  if (savedFilterModel) {
    this.gridApi.setFilterModel(JSON.parse(savedFilterModel));
  }
});

// 或者临时用setTimeout兜底（不推荐长期用，但可以快速验证）
setTimeout(() => {
  this.gridApi.setFilterModel(savedFilterModel);
}, 300);

2. 设置筛选模型后手动收起筛选面板 #

Ag-grid的setFilterModel只会同步筛选条件，并不会控制筛选面板的展开/收起状态。v31版本可能默认会把带有筛选条件的列的面板展开，这就导致了“没手动打开却显示组件”的问题。

可以在设置完筛选模型后，手动遍历所有列并关闭筛选菜单：

this.gridApi.setFilterModel(savedFilterModel);
// 遍历所有列，强制关闭筛选面板
this.gridApi.getAllColumns().forEach(column => {
  this.gridApi.closeFilterMenu(column);
});

3. 检查自定义筛选组件的实现逻辑 #

看看你的自定义筛选组件里有没有自己控制显示的逻辑，比如用*ngIf="filterModel"来判断是否显示？在v31里，Ag-grid对筛选组件的挂载时机变了，这种自定义判断很容易和框架的内置控制冲突。

确保组件的显示完全由Ag-grid的筛选菜单容器控制，不要自己加额外的显示隐藏逻辑。

4. 快速验证排查 #

先临时注释掉setFilterModel的代码，看看自定义筛选组件还会不会默认显示：

• 如果不再显示：问题就出在设置筛选模型的环节，用上面1、2的方法就能解决；
• 如果还是显示：那要检查你的自定义组件本身，或者defaultColDef里的筛选配置有没有误开了强制显示的选项。

备注：内容来源于stack exchange，提问作者user14300875