如何从 angular 中的 table 中删除行 2

Question

这是我从 table 中删除行的函数，此函数在删除行时工作正常。但刷新后删除的行再次显示。那么我该如何解决这个问题。

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

您需要存储数据，因为刷新后 angular 应用程序也会从头开始刷新，因此您需要使用本地或会话存储。

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')) || [];
}

如何从 angular 中的 table 中删除行 2

How to delete row from table in angular 2

angular2-forms