Angular 为什么更改组件属性的值会自动更改相应的服务属性？

我正在开发一个angular2应用程序，它利用多个服务在整个应用程序中共享日期

在我的应用程序的一部分中，我有一个编辑功能，允许用户修改数组中的数据

在这种情况下，当用户修改组件中的属性时，服务中的相应数据也会被修改，而无需直接设置

我已经学了6个月的angular，但我知道将一个数组设置为另一个数组实际上是指向同一个对象。因此，在本例中，我在服务中有一个方法，它以slice（）的形式返回数组，我认为它应该创建新数组，以避免用户能够直接修改服务数据

我正在开发的完整应用程序相当复杂，但我能够创建一个简单的角度应用程序来演示正在发生的事情

test.component.html： test.service.ts： test.component.ts： 在组件中，通过调用testService.getData（）方法在Ngonit中初始化testComponentData属性，该方法返回此.serviceData.slice（）

在本例中，我单击第3个按钮将fname设置为“Bartholomew”。正如您在嵌入的注释中看到的，testService数据会更改，即使我只是更改组件对象（testComponentData），服务数据也会更改（this.testService.getData（））

超时就在这里，因为有时候第一个console.log是laggy，并且log会显示值已经更改

我一辈子都看不出这是怎么回事。我知道这里有一些基本的东西，我假设我正在以某种方式访问同一个对象，但我不明白为什么

感谢您的帮助。谢谢大家!

这是因为在对象数组上创建一个新数组，该数组的值是对原始对象的引用。您不会看到类似字符串或数字数组的功能。您可以从浅层复制数组中获得更多信息。

这是因为在对象数组上创建的新数组的值是对原始对象的引用。您不会看到类似字符串或数字数组的功能。您可以从浅层复制阵列中获得更多信息。

Empty

.slice（）

调用是复制阵列的已知快捷方式。类似于使用spread

[…someArray]

操作符。但是，由于数组的内容是对象，它们通过引用返回到新数组中

基本上，两个阵列，即服务中的

serviceData

和服务中的

temp

组件共享相同的对象引用

因此，更新

temp

中项目的值也反映在

serviceData

数组中。

Empty

.slice（）

调用是复制数组的已知快捷方式。类似于使用spread

[…someArray]

操作符。但是，由于数组的内容是对象，它们通过引用返回到新数组中

基本上，两个阵列，即服务中的

serviceData

和服务中的

temp

组件共享相同的对象引用

---

因此，更新

temp

中项目的值也会反映在

serviceData

数组中。

由于对象的引用相同，对象将发生更改。如果不想影响原始对象的效果，现在需要克隆。尝试使用以下代码

声明克隆阵列：

clonedTestComponentData: TestObject[];

克隆阵列：

const this.clonedTestComponentData  = Object.assign([], this.testComponentData);

const temp = Object.assign({}, this.testComponentData.find(o => o.id === id));

克隆对象：

const this.clonedTestComponentData  = Object.assign([], this.testComponentData);

const temp = Object.assign({}, this.testComponentData.find(o => o.id === id));

---

由于对象的引用相同，对象将发生更改。如果不想影响原始对象的效果，现在需要克隆。尝试使用以下代码

声明克隆阵列：

clonedTestComponentData: TestObject[];

克隆阵列：

const this.clonedTestComponentData  = Object.assign([], this.testComponentData);

const temp = Object.assign({}, this.testComponentData.find(o => o.id === id));

克隆对象：

const this.clonedTestComponentData  = Object.assign([], this.testComponentData);

const temp = Object.assign({}, this.testComponentData.find(o => o.id === id));

---

谢谢Shohel！感谢您花时间给出代码示例，说明如何克隆对象和数组。谢谢Shohel！感谢您花时间给出代码示例，说明如何克隆对象和数组。啊，谢谢您！现在完全有道理了！但愿我能勾选多个答案。啊，谢谢你一个午餐先生！现在完全有道理了！希望我能勾选多个答案。谢谢你！这三个答案都帮助我理解了其中一个问题。我很感激！谢谢你，阿什！这三个答案都帮助我理解了其中一个问题。我很感激！