fonction de jonction non mise à jour ma liste correctement tout en supprimant les dossiers autres que la dernière

Question

Ceci est ma fonction Supprimer:

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

Et mon modèle a:

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

Quand je retirer la dernier enregistrement de la liste, il fonctionne bien, mais si je supprime tous les autres enregistrements du milieu de la liste, il se brise et n'affiche pas les valeurs comme jointes dans l'image Il ya aussi un avertissement dans la console as seen in this screenshot.

Answer 1

La suppression de valeur = "" dans l'étiquette d'entrée a résolu ce problème. Lorsque vous supprimez les enregistrements intermédiaires d'une liste, l'index augmente.