Estoy usando Angular 9 y estoy tratando de agregar varios objetos en una matriz. Pero veo que al agregar el nuevo objeto, los objetos existentes también cambian. Sospecho que es porque la matriz tiene una referencia al objeto.

¿Cómo cambio eso?

Código:

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

La salida es

[{'nombre': 'Mundo,' edad ':' 26 ',' área ':' WB '}, {' nombre ':' Mundo, 'edad': '26', 'área': 'WB'} ]

Lo que quiero es

[{'nombre': 'Hola,' edad ':' 25 ',' área ':' EN '}, {' nombre ':' Mundo, 'edad': '26', 'área': 'WB'} ]

0
Anamik Adhikary 24 jun. 2020 a las 15:24

4 respuestas

La mejor respuesta

Empuja la misma referencia en la matriz cada vez (this.userModel), sin reasignar a un objeto diferente. Por lo tanto, this.userArray [0] y this.userArray [1] son el mismo objeto, y los cambios realizados en el elemento en un índice o this.userModel afectarán al otro. Tratar

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)
}
3
Kaustubh Badrike 24 jun. 2020 a las 12:34

En lugar de this.userArray.push(this.userModel), deberá cambiarlo a this.userArray.push({ ...this.userModel }) en ambos lugares.

Esto solucionará su error.

El error que estás haciendo es:

La variable userModel almacena la referencia al objeto y el mismo objeto se inserta como referencia a la matriz cuando lo hace this.userArray.push(this.userModel).

Entonces, si cambia userModel nuevamente, está cambiando el objeto al que hacen referencia todas las demás variables.

1
Harish 24 jun. 2020 a las 12:42

Como dijo @Kaustubh, solo está cambiando el mismo objeto y empujándolo nuevamente a la matriz.

Otra forma de hacer esto sería utilizar el operador de propagación al presionar, para copiar el objeto, en lugar de presionar el original. Esto me gusta más, ya que la matriz termina con una copia en lugar del objeto original.

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 })
}
0
mfaith 24 jun. 2020 a las 12:42

Cuando accede a this.userModel.name se refiere al mismo objeto. Por lo tanto, debe crear un nuevo objeto UserModel y establecer valores antes de pasar a la matriz.

Puedes hacerlo simplemente como a continuación

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})
}
1
Ajantha Bandara 24 jun. 2020 a las 12:44