时间戳

首页 > 解决方案 > 函数更新与 [(ngModel)] 绑定的数组中的所有对象

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

问题描述

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

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

它基本上是一个要填写的时间表列表。显示基本信息，然后用户可以输入一个数量 if hours (-> hoursLogged)，然后调用 calculate() 方法，自动填写要填写的数量有薪酬的：

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

现在这就是问题所在：

每当我在一个字段中输入几个小时时，所有付款字段也会被填写，尽管我使用绑定付款字段

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

在此处输入图像描述

所以我的问题是：为什么当我专门绑定对象的各个元素并且还专门为所述元素调用 calculate() 函数时，所有字段都被更新了？

感谢您的任何指示。

标签： angulartypescript

解决方案

感谢用户 Arcteezy 和 AJT_82，以下解决了这个问题：

字段名称需要 - 当然 - 是唯一的。所以这就是有效的（如果有人偶然发现这个问题：

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

推荐阅读