如何在ag-grid中编辑来自NgRx的不可变Observable数据源？

问题根源 #

NgRx维护的状态是**不可变（Immutable）**的，ag-grid默认会直接尝试修改行数据对象的属性，但不可变对象被标记为not extensible，因此触发报错。

解决方案 #

1. 编辑前生成可修改的数据副本 #

利用ag-grid的processCellForEdit列定义钩子，在进入编辑模式前，复制一份行数据的可扩展副本，让ag-grid编辑这个副本而非原不可变对象：

// 列定义示例
columnDefs = [
  {
    headerName: '可编辑列',
    field: 'prop',
    editable: true,
    processCellForEdit: (params) => {
      // 返回原数据的浅拷贝（如果是嵌套数据需用深拷贝）
      return {...params.data};
    }
  }
];

2. 编辑完成后同步到NgRx状态 #

通过cellValueChanged事件监听编辑结果，将修改后的数据通过NgRx Action发送到Store，由Reducer生成新的不可变状态：

// 组件中监听单元格值变化
onCellValueChanged(params) {
  const updatedRow = params.data;
  // 发送Action更新NgRx状态
  this.store.dispatch(new UpdateRowAction(updatedRow));
}

3. 在NgRx Reducer中实现不可变更新 #

Reducer中必须创建新的数组和对象来替换修改的行，保持状态不可变性：

// Reducer示例
function dataReducer(state: State = initialState, action: Actions): State {
  switch (action.type) {
    case ActionTypes.UpdateRow:
      const updatedRows = state.rows.map(row => 
        row.id === action.payload.id ? {...row, ...action.payload} : row
      );
      return {...state, rows: updatedRows};
    default:
      return state;
  }
}

注意事项 #

• 如果行数据包含嵌套对象，processCellForEdit中需要使用深拷贝（比如Lodash的cloneDeep或自定义深拷贝函数），避免修改原数据的嵌套属性。
• 确保getRowNodeId配置正确，ag-grid能准确识别行标识，避免编辑后行数据出现渲染异常。

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