恒定服务变量角度

Question

我在angular中有一个服务，在那里我存储了一个从api调用中获得的名为array_item的数组，在组件中我声明了两个名为var_1和var_2的变量，这两个变量的值与我从服务中获得的值相同

即var_1 = this.service.array_item&amp；var_2 = this.service.array_item

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

提前感谢

Answer 1

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

可以按照本参考中的说明进行复制

然后组件代码会像

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()

有关深度复制与浅层复制的更多参考，您可以查看此链接