javascript - 拼接函数在删除除最后一个记录之外的记录时没有正确更新我的列表

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>

当我从列表中删除最后一条记录时，它工作正常，但是如果我从列表中间删除任何其他记录，它会中断并且不显示图像中附加的值而且在此屏幕截图中看到的控制台。

Answer 1

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