拼接功能在删除除最后一个记录以外的记录时未正确更新我的列表

Question

这是我的删除函数：

onRemoveTransaction(index : number){
    this.transactionsList.splice(index, 1);
    console.log(this.transactionsList);
}

我的模板有：

<tr *ngFor="let transactionDetails of transactionsList; let i=index">

            <td>
              <input type="text" name="trxNumber-{{i}}" value="trxNumber-{{i}}"
                     class="form-control" minlength="1" maxlength="20"
                     [(ngModel)]="transactionDetails.trxNumber" disabled/>
            </td>
            <td>
              <input type="number" name="amountDue-{{i}}" value="amountDue-{{i}}"
                     class="form-control" minlength="1" maxlength="20"
                     [(ngModel)]="transactionDetails.trxAmount"/>
            </td>
            <td>
              <input type="text" name="customer-{{i}}" value="customer-{{i}}"
                     class="form-control" minlength="1" maxlength="20"
                     [(ngModel)]="transactionDetails.customerId" disabled/>
            </td>
            <td>
              <input type="text" name="comments-{{i}}" value="comments-{{i}}"
                     class="form-control" minlength="1" maxlength="20"
                     [(ngModel)]="transactionDetails.comments"/>
            </td>
            <td>
              <input type="text" name="transactionType-{{i}}" value="transactionType-{{i}}"
                     class="form-control" minlength="1" maxlength="20"
                     [(ngModel)]="receiptType" disabled/>
            </td>
            <td class="text-center">
              <span *ngIf="transactionDetails.id != null; else showRemove">
                 <button type="button" title="Delete" class="btn btn-danger btn-md glyphicon glyphicon-trash text-danger"
                         [disabled]="disablePostBatch" data-toggle="modal"
                         data-target="#deleteTransactionModal" (click)="onDeleteTransaction(transactionDetails)">
                 </button>
              </span>
              <ng-template #showRemove>
                <button type="button" title="Remove" class="btn btn-danger btn-md glyphicon glyphicon-remove text-danger"
                        (click)="onRemoveTransaction(i)">
                </button>
              </ng-template>
            </td>
          </tr>

当我从列表中删除最后一条记录时，它工作正常，但如果我从列表中间删除任何其他记录，它就会中断并且不会显示图像中附加的值也有是控制台中的警告 as seen in this screenshot.

Answer 1

删除输入标签中的 value="" 已解决此问题。当您从列表中删除中间记录时，索引会向上移动。