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>

リストから最後のレコードを削除すると正常に動作しますが、リストの途中から他のレコードを削除すると壊れて、画像に添付されている値が表示されません。このスクリーンショットに示されているコンソール。