代码之家  ›  专栏  ›  技术社区  ›  Fish-Guts

函数更新与[(ngModel)]绑定的数组中的所有对象

  •  0
  • Fish-Guts  · 技术社区  · 5 年前

    我有一个包含动态加载的数据的容器。

    <ng-container *ngFor="let timeSheet of timeSheets ;trackBy: trackId; let i = index;">
        <tr *ngIf="!timeSheet.client.exitDate || compareDate(timeSheet.client.exitDate, selectedDate)==1">
            <td>{{timeSheet.client.lastName}}</td>
            <td>{{timeSheet.client.firstName}}</td>
            <td>{{timeSheet.client.exitDate | date:'dd.MM.yyyy'}}</td>
            <td class="hours-column"><input name="hoursLogged" [(ngModel)]="timeSheets[i].hoursLogged" type="number" (change)="calculate(i)" /></td>
            <td class="hours-column">
                <input name="payment" type="number" [(ngModel)]="timeSheets[i].payment" value="{{timeSheets[i].payment}}"/>
                <div *ngIf="!timeSheets[i].plausible">Nope</div>
            </td>
        </tr>
    </ng-container>
    

    calculate(index) {
        console.log("updating index: " + index);
        this.timeSheets[index].payment = (5 * this.timeSheets[index].hoursLogged);
    }
    

    每当我在一个字段中输入小时数时,所有的付款字段都会被填写,尽管我使用

    [(ngModel)]="timeSheets[i].payment"
    

    enter image description here

    所以我的问题是:当我特别地绑定对象的各个元素,并且特别地调用该元素的calculate()函数时,为什么所有的字段都会被更新?

    谢谢你的指点。

    1 回复  |  直到 5 年前
        1
  •  0
  •   Fish-Guts    5 年前

    感谢用户Arcteezy和ajt82,以下解决了这个问题:

    当然,字段名必须是唯一的。以下是有效的方法(以防有人偶然发现这个问题:

    <input name="payment_{{i}}" type="number"[(ngModel)]="timeSheets[i].payment" value="{{timeSheets[i].payment}}"/>