如何检测Angular可编辑表格dataSource的数据变更？

核心思路 #

要区分「点击单元格但未修改」和「修改了内容」，关键是保留原始数据的快照，在编辑结束时将当前值与原始值对比。具体分为单个单元格的即时检测、整个数据源的全局检测两种场景。

步骤1：保存原始数据快照 #

组件初始化时对原始数据源做深拷贝，避免后续修改影响原始值的判断：

// 新增：保存原始数据的深拷贝，避免引用关联
originalDataSource: typeof ELEMENT_DATA = JSON.parse(JSON.stringify(ELEMENT_DATA));
// 原有的可编辑数据源
dataSource = ELEMENT_DATA;

注：如果数据包含嵌套对象、日期等复杂类型，JSON序列化会有局限，可改用lodash.cloneDeep实现深拷贝。

步骤2：单个单元格的变更检测 #

进入编辑模式时记录当前单元格的原始值，编辑结束（失去焦点）时对比当前值与原始值：

修改TS代码 #

// 新增：记录当前编辑单元格的原始值
currentOriginalValue: any;

edit(index: number, column: string) {
  this.editableColumn = column;
  this.editableIndex = index;
  // 保存当前单元格的原始值，用于后续对比
  this.currentOriginalValue = this.dataSource[index][column];
}

// 新增：判断单元格是否变更的方法
checkCellChange(index: number, column: string): boolean {
  const currentValue = this.dataSource[index][column];
  return currentValue !== this.currentOriginalValue;
}

// 修改reset方法，加入变更校验逻辑
reset() {
  if (this.editableIndex !== null && this.editableColumn) {
    const hasChanged = this.checkCellChange(this.editableIndex, this.editableColumn);
    if (hasChanged) {
      console.log('单元格内容已修改');
      // 这里可触发业务逻辑，比如标记该行已修改、提交变更等
    } else {
      console.log('未修改任何内容');
    }
  }
  this.editableColumn = '';
  this.editableIndex = null;
}

修改HTML代码（保持blur事件触发逻辑） #

<input
  matInput
  placeholder="Placeholder"
  (blur)="reset()"
  appFocusOnLoad
  [(ngModel)]="element.position"
/>

步骤3：整个数据源的全局变更检测 #

如果需要判断整个表格是否存在任何数据变更，可直接对比原始快照与当前数据源：

// 新增：全局检测数据源是否变更的方法
checkDataSourceChange(): boolean {
  // 遍历所有元素和字段，逐一对比原始值与当前值
  for (let i = 0; i < this.dataSource.length; i++) {
    for (const column of this.options) {
      if (this.dataSource[i][column] !== this.originalDataSource[i][column]) {
        return true;
      }
    }
  }
  return false;
}

// 调用示例：比如在保存按钮点击时校验
saveChanges() {
  const hasGlobalChange = this.checkDataSourceChange();
  if (hasGlobalChange) {
    console.log('数据源存在变更，可提交');
  } else {
    console.log('数据源无变更');
  }
}

额外优化点 #

• 支持批量撤销：基于originalDataSource重置当前数据源

resetDataSource() {
  this.dataSource = JSON.parse(JSON.stringify(this.originalDataSource));
}

• 实时检测：给input添加(input)事件，实时对比当前值与原始值，即时反馈变更状态。

内容的提问来源于stack exchange，提问作者Tim Launders