AG Grid使用valueSetter修改NGRX来源数据后单元格未更新问题

核心原因 #

• 你在valueSetter中修改的只是参数对象的data属性，既没有同步更新AG Grid绑定的数据源，也没有通知AG Grid行数据发生变更，因此界面不会触发重绘
• NGRX状态默认是只读的immutable结构，直接修改本地数据违反NGRX单向数据流规则，修改不会同步到全局状态，最终也会导致AG Grid无法拿到最新数据

标准生产环境解决方案 #

步骤1：调整columnDefs的valueSetter逻辑 #

不要直接修改params.data，改为派发NGRX action提交修改请求

this.columnDefs = this.columnDefs.map(obj=>({
  ...obj,
  editable: true, // 确认字段可编辑，很多场景会遗漏该配置
  valueSetter: (params:any) => {
    // 派发修改动作到NGRX，传递行唯一标识、修改字段、新值即可
    this.store.dispatch(updateGridRow({
      rowId: params.data.id, // 替换为你业务里行的唯一标识字段
      field: obj.field,
      newValue: params.newValue
    }));
    // 返回false，标识赋值操作交给NGRX异步处理，不需要AG Grid直接操作数据
    return false;
  }
}));

步骤2：在NGRX reducer中处理更新逻辑 #

严格遵循immutable规则生成新的网格数据

// reducer示例代码
const gridReducer = createReducer(
  initialState,
  on(updateGridRow, (state, { rowId, field, newValue }) => {
    return {
      ...state,
      gridData: state.gridData.map(row => {
        if(row.id === rowId) {
          // 只修改目标行，生成新对象
          return { ...row, [field]: newValue };
        }
        return row;
      })
    };
  })
);

步骤3：组件订阅NGRX状态，同步更新AG Grid #

开启AG Grid的immutable模式，提升更新性能，避免全量重绘

<!-- 组件模板AG Grid配置 -->
<ag-grid-angular
  [rowData]="gridData$ | async"
  [immutableData]="true"
  [getRowId]="getRowId"
  <!-- 其他AG Grid配置项 -->
></ag-grid-angular>

// 组件代码
// 订阅NGRX中的网格数据
public gridData$ = this.store.select(selectGridData); // 替换为你实际的NGRX选择器

// 实现行唯一标识获取方法，和reducer中的判断字段保持一致
getRowId = (params: any) => params.data.id;

临时调试方案（不推荐生产使用） #

如果只是需要快速验证编辑效果，可以直接在valueSetter中调用AG Grid的API更新行数据，无需走NGRX流程：

valueSetter: (params:any) => {
  const updatedRow = { ...params.data, [obj.field]: params.newValue };
  params.api.applyTransaction({ update: [updatedRow] });
  return true;
}

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