Angular集成AG Grid行内编辑级联下拉及状态异常问题

1. 自定义下拉单元格联动更新实现 #

两个自定义下拉编辑器的联动不要在组件内部独立维护状态，全部依托AG Grid的行节点状态做同步：

• 在第一个下拉编辑器的值变更回调中，通过入参拿到当前编辑行的节点对象params.node，调用params.node.setDataValue()方法更新行数据中关联第二个下拉数据源的字段，同时清空第二个下拉已选中的旧值，避免无效数据留存。
• 值更新完成后主动触发第二个下拉单元格的刷新：

// 第一个下拉选值变更逻辑
onFirstSelectChange(selectedVal) {
  this.params.node.setDataValue('firstCol', selectedVal);
  this.params.node.setDataValue('secondCol', null); // 清空第二个下拉旧值
  // 刷新第二个下拉单元格，强制组件重拿最新数据源
  this.params.api.refreshCells({
    rowNodes: [this.params.node],
    columns: ['secondCol'],
    force: true
  });
}

• 第二个下拉的自定义编辑器中，不要用agInit阶段拿到的静态数据源做渲染，每次组件刷新时都从当前行节点的最新数据里读取可选数据源，保证联动后拿到的是最新的选项列表。

2. 点击其他行自动退出编辑、操作列状态不同步修复 #

2.1 阻止点击其他行自动退出编辑的默认行为 #

整行编辑模式下默认开启了失焦停止编辑的配置，直接修改网格初始化配置关闭该逻辑即可：

this.gridOptions: GridOptions = {
  editType: 'fullRow',
  stopEditingWhenCellsLoseFocus: false, // 关闭单元格失焦自动停止编辑
  suppressClickEdit: true, // 禁用点击单元格直接触发编辑，统一由编辑按钮控制编辑入口
}

如果需要做更严格的拦截，比如编辑过程中禁止切换行焦点，可以追加onCellFocused事件判断，存在编辑中行时直接拦截焦点切换逻辑。

2.2 操作列按钮状态与编辑状态同步 #

不要在点击编辑按钮时手动修改DOM控制按钮显隐，把按钮渲染逻辑和行节点的编辑状态绑定，配合AG Grid的编辑生命周期事件做刷新：

• 操作列的自定义单元格渲染器中，直接通过params.node.editing属性判断当前行是否处于编辑状态：该值为true时显示保存、取消按钮，为false时显示编辑按钮。
• 全局监听行编辑的开始、停止事件，事件触发时强制刷新当前行的操作列单元格，保证UI状态和AG Grid内部编辑状态一致：

this.gridOptions = {
  // 其他配置省略
  onRowEditingStarted: (params) => {
    // 编辑开始时刷新操作列
    params.api.refreshCells({
      rowNodes: [params.node],
      columns: ['actionCol'],
      force: true
    });
  },
  onRowEditingStopped: (params) => {
    // 编辑停止时刷新操作列，重置按钮状态
    params.api.refreshCells({
      rowNodes: [params.node],
      columns: ['actionCol'],
      force: true
    });
  }
}

• 保存按钮逻辑调用this.gridApi.stopEditing()即可提交编辑内容，取消按钮逻辑调用this.gridApi.stopEditing(true)传入参数true即可回滚所有未保存的修改，两个方法执行后都会自动触发onRowEditingStopped事件，完成操作列状态重置。

注意：所有行数据、行状态的读写都要通过AG Grid提供的node、api方法操作，不要在自定义渲染器/编辑器内部维护脱离AG Grid上下文的独立状态，否则很容易出现UI和内部状态不一致的问题。

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