Spleiß-Funktion nicht ordnungsgemäß aktualisiert meine Liste, während die Datensätze andere Entfernung als die letzten

Question

Dies ist meine Remove-Funktion:

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

Und meine Vorlage hat:

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

Wenn ich das Entfernen bin Letzter Datensatz von der Liste funktioniert es gut, aber wenn ich andere Datensätze aus der Mitte der Liste entfernt, bricht es und zeigt nicht die Werte wie im Bild angefügt Auch gibt es eine Warnung in der Konsole as seen in this screenshot.

Answer 1

Durch das Entfernen von value = "" im Eingabe-Tag wurde dieses Problem behoben. Wenn Sie die mittleren Datensätze aus einer Liste löschen, wird der Index nach oben verschoben.