How to add item to an array list at angular

Question

I have a script registration screen and on this screen I can add n scenarios, I’m using angular, I can add the items in the list, but while typing in the input it changes the items that are already added to the list.

commponent.ts

incluirCenario() {

    this.cenario.push(
      {}
    )

}

html

<mat-card-title>Cadastrar Cenário</mat-card-title>
    <mat-form-field appearance="outline" style="width:40%">
       <mat-label>Nome do Cenário:</mat-label>
       <input matInput type="text" formControlName="nomeCenario" [(ngModel)]="cenario.nome" maxlength="100" />
    </mat-form-field>
    <button mat-button (click)="incluirCenario()" color="primary" >Incluir
        <mat-icon>add</mat-icon>
    </button>
</mat-card>

Answer 1

Deborah, I couldn’t understand your code because it has a routine this.cenario.push() and an object cenario in ngModel. I imagine that the first would be an array of scenarios and the second an editing object, I will then rename them to simulate their environment.

It is likely that you will be able to solve your problem using the spread operator (...). What he does is clone the object without keeping the reference. What does that mean? A referenced object is only 1 single object and the others are pointed variables (pointers) to it, when this object is changed, the variables will reflect the changes of this object.

You should then create a copy of this object when adding to the array, as follows:

listaCenario: CenarioObj[] = [];
cenario: CenarioObj;

incluirCenario() {
    this.cenario.push({...this.cenario});
}

So every push you give in the list a new copy of the object is inserted instead of just a "pointer" to the main object.

Remembering: So maintains reference .push(objeto); and so not .push({...objeto});.

Answer 2

Exactly what I wasn’t seeing!

I have declared a list of scenarios:

protected cenarios: Cenario[] = []
  protected cenario: Cenario = new Cenario();

In the inclusion method I made reference to this.cenario.name for this.roteiroAddForm.nameformGroup’s name.

 incluirCenario() {

    this.cenario.nome = this.roteiroAddForm.nomeCenario;
    this.cenarios.push({...this.cenario});


  }

Using the spread to remove the object reference, I can insert new records into the list without changing the records that were already added.

without the need to use ngModel my html code looks like this:

<mat-card>
          <mat-card-title>Cadastrar Cenário</mat-card-title>
          <mat-form-field appearance="outline" style="width:40%">
            <mat-label>Nome do Cenário:</mat-label>
            <input matInput type="text" formControlName="nomeCenario"  maxlength="100" />
          </mat-form-field>
          <button mat-button (click)="incluirCenario(cenario)" color="primary" >Incluir
            <mat-icon>add</mat-icon>
          </button>
        </mat-card>