Angular 9 在数组中添加多个对象会覆盖现有数组答案

【问题标题】：Angular 9 Adding Multiple Objects in an array overrides the existing arrayAngular 9 在数组中添加多个对象会覆盖现有数组
【发布时间】：2020-06-24 20:44:02
【问题描述】：

我正在使用 Angular 9 并尝试在数组中添加多个对象。但我看到在添加新对象时，现有对象也会发生变化。我怀疑这是因为数组引用了对象。

我该如何改变它。

代码：

userModel: UserModel = new UserModel()
userArray: any = new Array()

.....codes..constructors....oninits etc...

submit(){
    this.userModel.name = "Hello"
    this.userModel.age = "25"
    this.userModel.area = "IN"

    this.userArray.push(this.userModel)

    this.userModel.name = "World"
    this.userModel.age = "26"
    this.userModel.area = "WB"

    this.userArray.push(this.userModel)
}

输出是

[{'name':'World, 'age':'26', 'area':'WB'},{'name':'World, 'age':'26', 'area':' WB'}]

我想要的是

[{'name':'你好,'age':'25','area':'IN'},{'name':'世界,'age':'26','area':' WB'}]

【问题讨论】：

标签： angular angular9

【解决方案1】：

您每次都将相同的引用推送到数组中（this.userModel），而无需重新分配给不同的对象。因此，this.userArray[0] 和 this.userArray[1] 是同一个对象，对一个索引处的项目或 this.userModel 所做的更改将影响另一个。试试

submit(){
    this.userModel.name = "Hello"
    this.userModel.age = "25"
    this.userModel.area = "IN"

    this.userArray.push(this.userModel)

    this.userModel = {} as any; // reassign the reference to a new Object

    this.userModel.name = "World"
    this.userModel.age = "26"
    this.userModel.area = "WB"

    this.userArray.push(this.userModel)
}

【讨论】：

【解决方案2】：

而不是this.userArray.push(this.userModel)，您必须在这两个地方都将其更改为 this.userArray.push({ ...this.userModel })。

这将解决您的错误。

你犯的错误是：

userModel 变量存储对对象的引用，当您执行this.userArray.push(this.userModel) 时，相同的对象被推送为对数组的引用。

因此，如果您再次更改userModel，您将更改所有其他变量引用的对象。

【讨论】：

【解决方案3】：

当您访问 this.userModel.name 时指的是同一个对象。所以你需要在推送到数组之前创建一个新的 UserModel 对象并设置值。

你可以像下面这样简单地做到这一点

submit() {
    this.userModel.name = "Hello"
    this.userModel.age = "25"
    this.userModel.area = "IN"

    this.userArray.push({...this.userModel})

    this.userModel.name = "World"
    this.userModel.age = "26"
    this.userModel.area = "WB"

    this.userArray.push({...this.userModel})
}

【讨论】：

【解决方案4】：

就像@Kaustubh 所说，您只是在更改同一个对象并将其再次推送到数组中。

另一种方法是在推送时使用扩展运算符来复制对象，而不是推送原始对象。我更喜欢这个，因为数组以副本而不是原始对象结束。

submit() {
    this.userModel.name = "Hello"
    this.userModel.age = "25"
    this.userModel.area = "IN"

    this.userArray.push({ ...this.userModel })

    this.userModel.name = "World"
    this.userModel.age = "26"
    this.userModel.area = "WB"

    this.userArray.push({ ...this.userModel })
}

【讨论】：