Angular ag grid点击按钮实现单行折叠，调用setExpanded无效问题咨询

setExpanded方法调用未生效，通常是调用对象错误、调用时机不对、配置缺失三类原因导致，可按照以下步骤实现需求：

前置配置 #

首先确保你已正确存储ag Grid的API实例，后续所有操作都依赖该实例调用：

// component.ts
import { GridApi } from 'ag-grid-community';

private gridApi!: GridApi;

// 绑定grid初始化完成事件存储API
onGridReady(params: any) {
  this.gridApi = params.api;
}

模板侧绑定事件：

<!-- component.html -->
<ag-grid-angular
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [getRowId]="getRowId" // 必加配置，用于快速定位行节点
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

补充getRowId方法，返回行数据的唯一标识：

getRowId = (params: any) => params.data.id; // 此处id替换为你业务中实际的行唯一字段

核心折叠逻辑实现 #

调用setExpanded必须作用于ag Grid生成的行节点实例，不能直接调用行数据对象：

// 入参为要折叠行的唯一标识
collapseSpecifiedRow(rowUniqueId: string | number) {
  // 校验grid是否已初始化完成
  if (!this.gridApi) return;
  // 获取目标行的节点实例
  const targetRowNode = this.gridApi.getRowNode(rowUniqueId);
  // 仅当行存在且处于展开状态时执行折叠
  if (targetRowNode && targetRowNode.expanded) {
    // 第二个参数传true可强制刷新视图，无渲染异常时可以不传默认false
    targetRowNode.setExpanded(false, true);
  }
}

按钮绑定调用 #

你可以根据业务场景在操作列按钮的点击事件中传入当前行的唯一标识，触发上述方法即可。如果是用ag Grid自定义单元格渲染组件，直接在组件内通过params.data.id拿到标识调用父组件的折叠方法即可。

异常排查 #

如果调整后依然不生效，可以检查以下两项：

• 树结构/行分组场景下，确认你拿到的是父层级节点，只有父节点才存在expanded属性
• 如果是分页场景，确认目标行处于当前已加载的分页范围内，不在范围内的行节点无法被获取到

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