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.