Why parent component doesn't update when save form with spread operator ,but when use "pus-CodePudding

When I Use [...this.characters, this.new] .. in characters.component.html doesn't update the list, but when I use this.characters.push( this.new) it works ...Why?

//add.component.ts
import { Component, OnInit,Input } from '@angular/core';
import { Character } from '../interfaces/dbz';

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css']
})
export class AddComponent implements OnInit {
  @Input() new: Character = {
    name: '',
    power: 0,
  };
  @Input() characters: Character[] = [];
  save(): void {
    // this.characters= [...this.characters, this.new] Doesn't works :(
    this.characters.push( this.new)


    this.new = {
      name: '',
      power: 0,
    };
  }
  constructor() { 
    
  }

  ngOnInit(): void {
  }

}

In this form i call my save method

//add.component.html
<h3>Add {{ new.name }}</h3>
<hr />
<form (ngSubmit)="save()" action="">
  <input type="text" placeholder="Name" name="name" [(ngModel)]="new.name" />
  <input
    type="number"
    placeholder="Power"
    name="power"
    [(ngModel)]="new.power"
  />
  <button type="submit">Add</button>
</form>

///characters.component.ts
import { Component, OnInit,Input} from '@angular/core';
import { Character } from '../interfaces/dbz';
@Component({
  selector: 'app-characters',
  templateUrl: './characters.component.html',
  styleUrls: ['./characters.component.css']
})
export class CharactersComponent implements OnInit {
  @Input() characters: Character[] = [];
  constructor() {
   }
   ngOnInit(): void {
   }
}

The list doesn't update when use the spread operator ,.. but when I push the new item , add a new character in list

//characters.component.html
<h3>Characters</h3>
<hr />
<ul>
  <li *ngFor="let item of characters;debugger">{{ item.name }} - {{ item.power }}</li>
</ul>

Here I call my components passing the character and the new character to the form and passing the character to the list html

///main-page.component.html
<div >
  <div >
    <app-characters [characters]="characters"></app-characters>
  </div>
  <div >
    <app-agregar [characters]="characters" [new]="new"></app-agregar>
  </div>
</div>

Here I initialize my character list and my new character

//main-page.component.ts
import { Component, OnInit} from '@angular/core';
import { Character } from '../interfaces/dbz';

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.css']
})
export class MainPageComponent implements OnInit {
  new: Character = {
    name: '',
    power: 0,
  };
  characters: Character[] = [
    {
      name: 'Goku',
      power: 12000,
    },
    {
      name: 'Vegeta',
      power: 7500,
    },
    {
      name: 'Krilin',
      power: 1200,
    },
  ];
  constructor() { 
    
  }
  ngOnInit(): void {
 
  }

}

I need help I don't know why when I push the list .. my character list is updated and when I use spread operator It does nothing

CodePudding user response：

This is because of memory references.

You start with MainPageComponent where you declare an array of characters. We will call this, memRef0.

You then send it through an Input, into your components. So memRef0 is applied to the components inputs. In AddComponent, it means that the characters array, which is memRef1, points to memRef0.

In your AddComponent, you do this :

/* 1 */ this.characters= [...this.characters, this.new]
/* 2 */ this.characters.push( this.new)

The second line pushes a value in memRef0, so it works, the memory reference gets updated.

But the first line, it says that memRef1 should no point to memRef0 anymore, but rather to another one, which is memRef2.

Since memRef2 is unknown from MainPage, it doesn't get updated.

To resolve that, either use push like you did, or use an @Output() add = new EventEmitter(); to notify the MainPage of the change, and MainPage will be in charge of updating memRef0, which will in turn be propagated to the children components.