All my Arrays pushed into an object changes when i change values in my input with the attribute ngModel

Question

I have this table in the frontend.

<table class="table table-hover">
                <thead>
                    <tr>
                        <th> Numero de Asiento Contable </th>
                        <th> Fecha </th>
                        <th> Cuenta Contable </th>
                        <th> Descripcion </th>
                        <th> Debe </th>
                        <th> Haber </th>
                        <th> </th>
                    </tr>
                </thead>

                <tbody>
                    <tr *ngFor="let asientoContable of asientosContables">
                        <td>
                            <input [(ngModel)]="asientoContable.id" type="text" class="form-control" placeholder="id">
                        </td>
                        <td>
                            <input [(ngModel)]="asientoContable.fecha" type="text" class="form-control" placeholder="Nombre del asiento contable">
                        </td>
                        <td>
                            <input [(ngModel)]="asientoContable.ccontable.nombre" type="text" class="form-control" placeholder="Nombre del asiento contable">
                        </td>
                        <td>
                            <input [(ngModel)]="asientoContable.descripcion" type="text" class="form-control" placeholder="Nombre del asiento contable">
                        </td>
                        <td>
                            <input [(ngModel)]="asientoContable.debe" type="text" class="form-control" placeholder="Nombre del asiento contable">
                        </td>
                        <td>
                            <input [(ngModel)]="asientoContable.haber" type="text" class="form-control" placeholder="Nombre del asiento contable">
                        </td>
                        <td>
                            <button (click)="guardarHospital( hospital )" class="btn btn-primary">
                              <i class="fa fa-save">
                              </i>  
                            </button>
                            <button (click)="borrarHospital( hospital )" class="btn btn-danger">
                              <i class="fa fa-trash-o">
                              </i>  
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>

and in the module i have the next:

guardarPosicion( posicionAsiento: PosicionAsiento ) {


    this.asientoContable.posicionesAsiento.push( posicionAsiento );

    console.log(this.asientoContable);

  }

When I insert my first Array with the name "posicionAsiento" into the Object "asientoContable", the object will have this values:

fecha: "" id: "" posicionesAsiento: Array(1) 0: PosicionAsiento ccontable: "2" debe: "2" descripcion: "2" haber: "2" id: 0 proto: Object length: 1 proto: Array(0) usuario: "" _id: ""

But when I insert my second value, the old value override with the new value not only that when i change something on the Input it override all my Arrays on the Object "asientoContable" I don't understand why. Because I did the push already on the Object. Why the NgModel its linked with the Arrays inserted on the Object?

Thx for your help

Answer 1

Try the code. I believe it should work. change code like below

 <tr *ngFor="let asientoContable of asientosContables; let i = index; trackBy:i;">

add name property like

name="ID-{{i}}"

I have modified your code and use it

<table class="table table-hover">
<thead>
    <tr>
        <th> Numero de Asiento Contable </th>
        <th> Fecha </th>
        <th> Cuenta Contable </th>
        <th> Descripcion </th>
        <th> Debe </th>
        <th> Haber </th>
        <th> </th>
    </tr>
</thead>

<tbody>
    <tr *ngFor="let asientoContable of asientosContables; let i = index; trackBy:i;">
        <td>
            <input [(ngModel)]="asientoContable.id" name="id-{{i}}" type="text" class="form-control" placeholder="id">
        </td>
        <td>
            <input [(ngModel)]="asientoContable.fecha" name="fecha-{{i}}" type="text" class="form-control" placeholder="Nombre del asiento contable">
        </td>
        <td>
            <input [(ngModel)]="asientoContable.ccontable.nombre" name="nombre-{{i}}" type="text" class="form-control" placeholder="Nombre del asiento contable">
        </td>
        <td>
            <input [(ngModel)]="asientoContable.descripcion" name="descripcion-{{i}}" type="text" class="form-control" placeholder="Nombre del asiento contable">
        </td>
        <td>
            <input [(ngModel)]="asientoContable.debe" name="debe-{{i}}" type="text" class="form-control" placeholder="Nombre del asiento contable">
        </td>
        <td>
            <input [(ngModel)]="asientoContable.haber" name="haber-{{i}}" type="text" class="form-control" placeholder="Nombre del asiento contable">
        </td>
        <td>
            <button (click)="guardarHospital( hospasientoContableital )" class="btn btn-primary">
              <i class="fa fa-save">
              </i>  
            </button>
            <button (click)="borrarHospital( hospital )" class="btn btn-danger">
              <i class="fa fa-trash-o">
              </i>  
            </button>
        </td>
    </tr>
</tbody>

Your Component Code should look like

guardarPosicion( posicionAsiento) {

this.asientosContables.push( new PosicionAsiento(posicionAsiento));

console.log(this.asientosContables);

}