1

ocurre una cosa en mi código y no entiendo por qué ocurre.

Este es mi código TS:

import { Component } from '@angular/core';

interface Personaje{
  nombre:string;
  poder:number;
}

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.css']
})
export class MainPageComponent{

  personajes: Personaje[] = [
    {
      nombre: 'Goku',
      poder: 15000
    },
    {
      nombre: 'Krilin',
      poder: 700
    },
    {
      nombre: 'Vegeta',
      poder: 150
    }
  ]

  nuevo: Personaje = {
      nombre: '',
      poder: 0
  }

  cambiarNombre(){

  }

  agregar(){
      console.log(this.nuevo)
      this.personajes.push(this.nuevo)

  }

}

Este es mi código HTML:

<h1>Dragon Ball Z</h1>
<hr>

<div class="row">
  <div class="col">
      <h3> Personajes </h3>
      <hr>
      <ul *ngFor="let personaje of personajes">
          <li> {{personaje.nombre}} - {{personaje.poder | number}} </li>
      </ul>
  </div>

  <div class="col">
      <h3> Agregar </h3>
      <hr>
      <form (ngSubmit)="agregar()">

          <input
          type="text"
          placeholder="Nombre"
          name="nombre"
          [(ngModel)]="nuevo.nombre">

          <input
          type="number"
          placeholder="Poder"
          name="poder"
          [(ngModel)]="nuevo.poder">

          <button type="submit"> Agregar </button>

      </form>
  </div>

</div>

Hay una lista de personajes y un formulario para añadir nuevos personajes, el nuevo personaje se guarda en una objeto llamado "nuevo" a una lista de personajes llamada "personajes".

El problema es que cuando añado el nuevo personaje, después cuando modifico el valor de "nuevo" en el formulario, el valor de la lista también cambia y no entiendo por qué si ya se ha guardado en el array y estoy haciendo un cambio en "nuevo" a posteriori. ¿Por qué ocurre esto?.

PD: sé cómo hacer que la app en sí funcione bien, pero me gustaría entender ese comportamiento.

1
  • Por lo que veo es un tema de referencia de objetos, cuando agregas el nuevo y el nuevo va a personajes, este array tendrá referencia a este objeto nuevo agregado, lo que significa que cada cambio al objeto afectará al mismo y a las referencias de este.
    – lsanchezo
    Commented el 18 ago. 2022 a las 0:15

1 respuesta 1

1

Es porque mantiene la referencia al objeto

y por la característica de [(ngModel)] la vista detecta a esos cambios Así que por ejemplo podemos usar para evitar lo anterior en tu código:

agregar(){
    let nuevoc=Object.assign({},this.nuevo)      
    this.personajes.push(nuevoc)
  }

El comportamiento en tu código se debe a que los objetos son almacenados y copiados “por referencia”

Al copiar los valores de un objeto a otras variables, en realidad, no copiamos los valores, sino la referencia al espacio en memoria que ocupan dichos objetos no importara cual variable modifiquemos se modificaran todas las variables

todas apuntaran a la misma posición de memoria. Entonces copiar una variable de objeto crea una referencia adicional al mismo objeto. El método Object.assign te permite crear un nuevo objeto copiando los valores de otro (u otros) objetos pasados como parámetros para asi no mutarlos ya que Object.assign() copia solo valores de propiedades copia superficial el primer parámetro de Object.assign es un objeto vacío, porque los cambios se aplican sobre este y no quieres modificar los objetos pasados como parámetro.

si fuera un objeto mas complejo usar deep copy JSON.parse(JSON.stringify(this.nuevo))

También podríamos haber obtenido el mismo resultado mediante el operador Spread en el caso de que solo se requiera una copia superficial

agregar(){
    let spredc={...this.nuevo}
    this.personajes.push(spredc)
  }  

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.