时间戳

首页 > 解决方案 > 当我使用属性 ngModel 更改输入中的值时，我推入对象的所有数组都会更改

angular - 当我使用属性 ngModel 更改输入中的值时，我推入对象的所有数组都会更改

问题描述

我在前端有这张桌子。

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

在模块中我有下一个：

guardarPosicion( posicionAsiento: PosicionAsiento ) {


    this.asientoContable.posicionesAsiento.push( posicionAsiento );

    console.log(this.asientoContable);

  }

当我将名为“posicionAsiento”的第一个数组插入对象“asientoContable”时，该对象将具有以下值：

fecha: "" id: "" posicionesAsiento: Array(1) 0: PosicionAsiento ccontable: "2" debe: "2" 描述: "2" haber: "2" id: 0 proto : 对象长度: 1 proto : Array( 0）usuario：“”_id：“”

但是当我插入第二个值时，旧值会被新值覆盖，不仅当我在输入上更改某些内容时，它会覆盖对象“asientoContable”上的所有数组，我不明白为什么。因为我已经对 Object 进行了推送。为什么 NgModel 与插入到对象上的数组链接？

谢谢你的帮助

标签： angulartypescript

解决方案

试试代码。我相信它应该工作。更改代码如下

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

添加名称属性，如

name="ID-{{i}}"

我已修改您的代码并使用它

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

您的组件代码应如下所示

guardarPosicion( posicionAsiento) {

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

console.log(this.asientosContables);

}

推荐阅读