从角度5中的服务功能返回后，服务的复杂对象从组件更改

Posted 2023-03-13

【中文标题】从角度5中的服务功能返回后，服务的复杂对象从组件更改

【英文标题】：Complex object of Service changes from component after returning from service function in angular 5

【发布时间】：2019-03-22 01:24:45

【问题描述】：

详细说明我的问题，

我有一个名为hero.service.ts 的服务，它正在一个名为hero.component.ts 的组件中使用。 hero.service.ts 包含一个变量 heros，它是一个 array，包含许多项。

我通过名为getHeroes() 的函数从hero.service.ts 获取heros 的值，该函数将变量返回为return this.heros;，并通过this.heros = this.heroService.getHeroes() 获取组件上的值。

在我的组件中，在表格中列出了英雄。 当我从表中删除行时，它实际上也从 hero.service.ts 的变量 heros 中删除。

为什么会这样？ 为什么它返回变量引用而不是一个值。

仅供参考，我通过返回heros 和... 传播运算符（如return [...this.heros];）来实现它。但是为什么服务传递变量的引用。请大家帮忙。

【问题讨论】：

Why does changing one array alters the other?的可能重复

嘿@sloth。这可以在 angular 1 和 javascript 中看到。但考虑到 Angular 5 是打字稿，这是怎么发生的？这背后究竟是什么。我只是想知道。

你能在StackBlitz中复制这个吗？很难相信：P

解决方法：const refArray = JSON.parse(JSON.stringify(originalArray))

@YashMajithiya 问题是一样的：你将一个数组的引用从一个地方传递到另一个地方，但该引用仍然指向 同一个数组。

【参考方案1】：

在 JavaScript 中，数组和对象等复杂数据类型通过引用而不是值传递。

当您从服务返回this.heros; 时，您的组件没有获得英雄数组。它得到了对内存中英雄数组的引用。

所以基本上在这一点上，你的组件和服务中的英雄属性都指向内存中的同一个数组。

为了在您执行 return [...this.heros]; 时解决此问题，这次它将英雄数组的元素分散到一个动态创建的新数组中，然后将对该新创建数组的引用返回给您的组件。

那时，组件 hero 指向内存中的不同数组。因此，当您这样做时，您会得到预期的结果，即英雄从组件数组中删除，而不是从服务数组中删除。

这里有一个StackBlitz 供您参考。