angular - Todos mis Arrays empujados a un objeto cambian cuando cambio los valores en mi input con el atributo ngModel

Tengo esta tabla en el 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>

y en el módulo tengo lo siguiente:

guardarPosicion( posicionAsiento: PosicionAsiento ) {


    this.asientoContable.posicionesAsiento.push( posicionAsiento );

    console.log(this.asientoContable);

  }

Cuando inserto mi primer Array con el nombre "posicionAsiento" en el Objeto "asientoContable", el objeto tendrá estos valores:

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: ""

Pero cuando inserto mi segundo valor, el valor antiguo se sobrescribe con el nuevo valor, y no solo eso, cuando cambio algo en el Input se sobrescriben todos mis Arrays en el objeto "asientoContable". No entiendo por qué. Porque ya hice el push en el objeto. ¿Por qué el NgModel está vinculado con los Arrays insertados en el objeto?

Gracias por tu ayuda

Respuesta #1

Prueba el código. Creo que debería funcionar. Cambia el código como sigue

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

agregar propiedad de nombre como

name="ID-{{i}}"

He modificado tu código y lo uso

<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>

El código de tu componente debería verse así

guardarPosicion( posicionAsiento) {

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

console.log(this.asientosContables);

}