常量服务变量 Angular

Question

我在 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 发生变化，我希望它保持不变。欢迎提出建议或解决方案。

提前致谢

Answer 1

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

可以按照此 Reference

中的说明进行复制

然后组件代码会像，

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

Answer 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

常量服务变量 Angular

Constant Service variable Angular

angular-services

angular