Angular中双向绑定导致表格行数据同步修改的原因及解决方法咨询

嘿，我来帮你搞清楚这个问题的来龙去脉，以及怎么解决它～

为什么修改输入框内容时表格行也跟着变？ #

这其实是JavaScript对象引用类型的特性在Angular里的直观体现：

• 你的Customers数组里存储的是CustomerModel类型的对象，而对象属于引用类型——它们实际存储在内存堆中，变量（比如数组里的元素、this.Customer）只是指向这个内存地址的"指针"。
• 当你在SelectedRow方法里执行this.Customer = _customer;时，并没有创建新的对象，只是把this.Customer的指针指向了数组里被选中的_customer对象的内存地址。
• 之后你通过[(ngModel)]双向绑定修改this.Customer的属性时，本质上是在修改内存堆里的原对象，所以表格里对应的行数据自然会同步变化——因为它们本来就是同一个对象！

怎么修改才能让输入框和表格行数据独立？ #

核心思路是：给this.Customer赋值一个原对象的副本，而不是直接引用原对象。这里有几种常用的实现方式：

方式1：使用对象展开运算符（浅拷贝）

如果你的CustomerModel是简单对象（没有嵌套的子对象），用展开运算符快速创建副本就足够了：

SelectedRow(_customer: CustomerModel) {
  // 创建原对象的浅拷贝，避免引用同一内存地址
  this.Customer = {..._customer};
}

方式2：手动实例化新对象并赋值属性

如果你想更明确地控制属性复制，或者对象结构简单，也可以手动创建新的CustomerModel实例，然后逐个赋值属性：

SelectedRow(_customer: CustomerModel) {
  this.Customer = new CustomerModel();
  this.Customer.CustomerCode = _customer.CustomerCode;
  this.Customer.CustomerName = _customer.CustomerName;
  this.Customer.CustomerAmount = _customer.CustomerAmount;
}

补充：如果是复杂嵌套对象（深拷贝）

如果CustomerModel里还有嵌套的对象（比如地址、联系人等），浅拷贝就不够用了，这时候可以用JSON.parse(JSON.stringify(_customer))来实现深拷贝（注意这种方式不支持函数、Symbol等特殊类型）：

SelectedRow(_customer: CustomerModel) {
  this.Customer = JSON.parse(JSON.stringify(_customer)) as CustomerModel;
}

这样修改后，你在输入框里编辑的就是一个独立的副本，不会影响表格里的原数据啦～

内容来源于stack exchange