Angular 4中编辑Nationality时避免影响NationalityList的问题问询

这个问题的核心是JavaScript对象的引用特性：当你从NationalityList中选择一个元素并赋值给Nationality时，你并没有创建一个新对象，只是把原对象的内存地址引用赋值给了Nationality。这意味着两个变量指向的是同一个对象，所以修改Nationality的属性时，NationalityList中对应的原对象也会被同步修改。

解决方法：创建对象的独立副本 #

你需要在编辑时，为Nationality创建一个原对象的独立副本，而不是直接引用原对象。以下是几种常用的实现方式：

1. 使用JSON.parse(JSON.stringify())（适用于大多数普通数据对象）

这是最简单的深拷贝方式，适合没有嵌套函数、循环引用或特殊类型（如Date、RegExp）的业务数据对象：

// 假设你有一个编辑触发事件，比如点击列表项
onEditSelectedNation(selectedNation: any) {
  // 替换原来的直接赋值，改用深拷贝创建独立副本
  this.Nationality = JSON.parse(JSON.stringify(selectedNation));
}

2. 使用扩展运算符（...）或Object.assign()（适用于单层结构对象）

如果你的Nation对象是单层结构（没有嵌套的子对象属性），可以用这两种浅拷贝方式：

// 扩展运算符写法
this.Nationality = {...selectedNation};

// Object.assign写法
this.Nationality = Object.assign({}, selectedNation);

注意：如果Nation包含嵌套对象（比如{ Nation: 'CN', Detail: { Code: 'CHN' } }），这两种方法只会拷贝外层对象，嵌套的子对象仍然是引用关系，此时还是需要用JSON的深拷贝方式。

3. 手动复制属性（适用于复杂类实例）

如果Nation是自定义类的实例，你可以手动复制每个属性，确保完全独立：

// 假设Nation是自定义类，包含NationId、Name等属性
onEditSelectedNation(selectedNation: Nation) {
  this.Nationality = {
    NationId: selectedNation.NationId,
    Name: selectedNation.Name,
    // 其他需要的属性逐一复制
  };
}

关键修改点说明 #

看你提供的GetNationalities和SaveNationality方法，问题并不在这两个函数里——问题出在你选择编辑项并赋值给Nationality的那个环节。只要把那个环节的直接赋值改成上面的拷贝方式，就能避免修改Nationality时影响NationalityList的问题。

举个完整的场景示例：

<!-- 模板中的列表点击事件 -->
<ul>
  <li *ngFor="let nation of NationalityList" (click)="onEdit(nation)">
    {{ nation.Nation }}
  </li>
</ul>

// 组件中的编辑方法
onEdit(nation: any) {
  // 关键：创建独立副本，而非直接引用原对象
  this.Nationality = JSON.parse(JSON.stringify(nation));
}

这样修改后，Nationality就是一个完全独立的对象，编辑输入框内容时只会影响它自己，不会再修改NationalityList里的原数据了。

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