常量服务变量 Angular答案

【问题标题】：Constant Service variable Angular常量服务变量 Angular
【发布时间】：2018-07-17 15:50:36
【问题描述】：

我有一个 Angular 服务，我在其中存储了一个名为 array_item 的数组，该数组是从我的 api 调用中获得的，并且在组件中我声明了 2 个名为 var_1 和 var_2 的变量，其中两个变量的值与我的相同从服务中获取

即：var_1 = this.service.array_item && var_2 = this.service.array_item

我在我的 HTML 中将它列为 2 个 DIV 的列表，但是当我更新 list_1 中的值时，它会更改服务中的数组项值，这会自动更改我在 list_2 中的数组项数据。我不希望列表 2 被更改，我希望它保持不变。欢迎提出建议或解决方案。

提前致谢

【问题讨论】：

你能展示你的代码吗？

标签： angular angular-services

【解决方案1】：

是的，这种行为很明显，因为 JavaScript 通过引用传递。因此，您可以通过在组件级别保留原始数组的另外 2 个副本来解决问题。

可以按照Reference中的说明进行复制

那么组件代码会是这样的，

var_1 = this.service.array_item.copy() // Implement copy function
var_2 = this.service.array_item.copy() // Implement copy function

【讨论】：

您好，正如我在答案中提到的，您必须实现复制功能。您可以参考我的答案中的参考链接来做到这一点

【解决方案2】：

这是因为您为两个变量分配了相同的值，或者您可以将其称为浅拷贝。您只需使用深度克隆来克隆值。最简单的方法是：

var_1 = this.service.array_item
var_2 = JSON.parse(JSON.stringify(this.service.array_item))

OR

var_2 = [...this.service.array_item]

OR

var_2 = this.service.array_item.slice()

有关深拷贝与浅拷贝的更多参考，您可以查看link

【讨论】：

这种 JSON 方法是性能密集型的。所以你也可以看看这个stackoverflow.com/questions/7486085/…
是的，它很慢，但它是其中一种方式，否则我们可以使用扩展运算符
这个 json parse 和 json stringify 对我来说很好，但不是 slice 和 spread 方法。有什么理由吗？