Question

我有一个angular服务，在这里我存储了一个从我的api调用中获得的名为array_item的数组，并且在该组件中我声明了两个分别名为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已通过引用传递。因此，您可以通过将其他两个原始数组副本保留在组件级别来解决该问题。

可以按照此Reference

中的说明进行复制

然后，组件代码将类似于

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

Answer 2

之所以发生这种情况，是因为您为两个变量都分配了相同的值，或者可以将其称为浅拷贝。。您需要使用 deep clone 进行克隆值。最简单的方法是：

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

常数服务变量角度

2 个答案: