角度2のテーブルから行を削除する方法

Question

これは、テーブルから行を削除する機能です。この機能は、行を削除すると機能します。リフレッシュ後に削除された行が再び表示されます。では、どうやってこの問題を解決しますか？

deleteListItem(id:number, index:number){ 
     if (confirm("Are you sure you want to delete")) 
     this.paymentDataService.deleteItem(id).subscribe(response =>{ 
     this.paymentLists.splice(index, 1); 
    }); 
} 

これは、データが表示されているときのhtmlです。

<tr *ngFor ="let payment of paymentLists; let i = index"> 
     <td>{{ payment.datesent}}</td> 
     <td>{{ payment.amount | currency:'USD':true}}</td> 
     <td>{{ payment.paymenttype}}</td> 
     <td>{{ payment.paymentdates}}</td> 
     <td><button (click)="deleteListItem(payment.id, i)" type="button">Delete</button> 
      </td> 

Answer 1

角度アプリケーションを更新した後も最初から更新されるため、ローカルまたはセッションストレージを使用する必要があるため、データを保存する必要があります。

deleteListItem(id:number, index:number){ 
     if (confirm("Are you sure you want to delete")) 
     this.paymentDataService.deleteItem(id).subscribe(response =>{ 
     this.paymentLists.splice(index, 1);               
     localStorage.setItem('key', JSON.stringify(this.paymentLists)); 
    }); 
}  

And in you need to retreive in onInit function lifecycle hook of your component 

ngOnInit(): void { 
this.paymentLists = JSON.parse(localStorage.getItem('key')) || []; 
}