javascript - ngFor 输入互相复制值

Question

我正在使用 Angular5，想创建一个表单，用户可以使用按钮插入新记录。每个记录都有许多控件，并且应该独立于其他记录进行更改。我已经这样做了很多次，但现在我得到了奇怪的结果。

<form #newRequestForm="ngForm">
    <a class="list-group-item" *ngFor="let detail of currentRequest.details; let index$ = index">
    .
    .
    .
    <ng-select [items]="products" [searchFn]="searchProduct" (change)="productChanged($event, detail)">
        <ng-template ng-label-tmp let-item="item">
            {{item.code}} - {{item.name1}}
        </ng-template>
    </ng-select>
    <input class="form-control" name="productname1" type="text" [ngModel]="detail.product.name1" />
    <input class="form-control" name="productname2" type="text" [ngModel]="detail.product.name2" />
    <input class="form-control" name="productname3" type="text" [ngModel]="detail.product.name3" />

    <input class="form-control" type="text" name="description" [(ngModel)]="detail.description" />

问题在于 ng-select onchange productChanged 调用的方法设置了当前所选产品的产品名称。 (产品在 erp 中有 3 个单独的名称字段。)当发生这种情况时，表单中所有记录的所有 3 个名称字段都会更改为当前所选产品的名称字段。无论我使用哪个 ng-select，一切都改变了。所有其他字段单独工作，例如:描述。

所以我认为错误出在方法中，但它看起来像这样:

productChanged($event, detail) {
    detail.product = $event;
    console.log('-----------------------------------------');
    this.currentRequest.details.forEach((d, i) => {
        console.log(i, d.product !== null ? d.product.name1 : '');
    });
}

是的，我尝试使用旧的 console.log 进行调试，它说根据该记录的 ng-select 的最后选择，每个detail.products 的内容都是完美的。

输入控件仍然会被我所做的任何选择重写。为什么？

Answer 1

因为您没有按函数指定跟踪，所以 Angular 并不真正知道如何跟踪您的输入。

<a class="list-group-item" *ngFor="let detail of currentRequest.details; let index$ = index; trackBy: customTB">

customTB(index, item) { return index + '-' + item.product.name1; }