Angular实现点击保存输入值后，避免输入实时同步更新目标对象

问题根源 #

当前代码中this.editedRowOrder = rowOrder是直接赋值对象引用，导致rowOrder和editedRowOrder指向内存中的同一个对象。因此修改输入框绑定的rowOrder.item时，editedRowOrder的对应属性会同步变化。

实现方案 #

要实现「修改输入框后点击操作保存至editedRowOrder，后续输入框修改不影响该对象」的效果，核心是断开对象引用，通过深拷贝创建独立对象，同时优化编辑流程避免误修改。

方案1：基于深拷贝的状态切换（适配原有按钮逻辑）

修改editRowOrder方法，在退出编辑状态时对rowOrder进行深拷贝，将新对象赋值给editedRowOrder：

editRowOrder(rowOrder: RowOrderModel){
  if(rowOrder.editRow){
    // 从编辑状态切回非编辑，保存当前值到editedRowOrder（深拷贝断开引用）
    this.editedRowOrder = JSON.parse(JSON.stringify(rowOrder));
  } else {
    // 从非编辑状态切入编辑，可选：将已保存的editedRowOrder值同步回原rowOrder
    if(this.editedRowOrder && this.editedRowOrder.id === rowOrder.id){
      rowOrder.item = this.editedRowOrder.item;
    }
  }
  rowOrder.editRow = !rowOrder.editRow;
}

输入框代码保持不变：

<input [(ngModel)]="rowOrder.item" [attr.disabled]="!rowOrder.editRow ? '' : null" >

方案2：使用临时变量绑定输入框（更安全的编辑流程）

为RowOrderModel新增临时属性tempItem，输入框绑定该临时变量，避免直接修改原数据：

1. 调整输入框绑定：

<input [(ngModel)]="rowOrder.tempItem" [attr.disabled]="!rowOrder.editRow ? '' : null" >

2. 修改编辑方法：

editRowOrder(rowOrder: RowOrderModel){
  if(!rowOrder.editRow){
    // 进入编辑状态，将原数据复制到临时变量
    rowOrder.tempItem = rowOrder.item;
  } else {
    // 退出编辑状态，同步临时变量值到原数据和editedRowOrder
    rowOrder.item = rowOrder.tempItem;
    this.editedRowOrder = JSON.parse(JSON.stringify(rowOrder));
  }
  rowOrder.editRow = !rowOrder.editRow;
}

关键说明 #

• 深拷贝方式：JSON.parse(JSON.stringify(rowOrder))适用于无复杂类型（如Date、Function）的对象；若对象包含复杂类型，可使用Lodash的_.cloneDeep方法（需提前引入）。
• 两种方案均通过创建独立对象断开引用，确保editedRowOrder保存后不受后续输入框修改影响，直到下次触发编辑操作。

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