时间戳

首页 > 解决方案 > 删除记录后的角度刷新表，使用材料表和rest api

angular - 删除记录后的角度刷新表，使用材料表和rest api

问题描述

我有一个带有可扩展行的材料表（https://material.angular.io/components/table/examples），我想管理删除到表本身，所以我创建了一个删除按钮，该按钮具有触发删除事件的功能. api有效，记录被正确删除，但删除后表没有刷新，我想实现这个行为。这里有一个带有假 api 的 stackblitz：https ://stackblitz.com/edit/angular-comzph

我尝试在我的删除函数中调用 ngOnInt 并导航回同一条路线，但没有任何反应......

deleteCustomer(id) {
 this.api.deleteCustomer(id)
  .subscribe(res => {
    alert(`cliente rimosso`);
    // TODO fix reload list after delete
    // this.router.navigate['/clienti'];
    this.ngOnInit();
  }, (err) => {
    console.log(err);
  }
 );
}

我也尝试使用此解决方案，但不起作用。我尝试使用 ngOnChange 和 ngOnDestroy，但也不起作用...

有人可以帮助我吗？

标签： angularrestangular-materialrefreshhttp-delete

解决方案

无需调用服务器获取更新数据并再次下载所有数据。只需调用此函数（如下）并删除数据源中的行（拼接）。从您的删除函数中传入记录 id，无论列名是您的 id 所在的位置，然后魔术就会发生。我包括分页器。

我的StackBlitz for Angular Material Table有一个工作示例。另请参阅我用于 CREATE AND UPDATE的UpdateDatatableService 。

// Remove the deleted row from the data table. 
// Need to remove from the downloaded data first.

  private deleteRowDataTable (recordId, idColumn, paginator, dataSource) {
    this.dsData = dataSource.data;
    const itemIndex = this.dsData.findIndex(obj => obj[idColumn] === recordId);
    dataSource.data.splice(itemIndex, 1);
    dataSource.paginator = paginator;
  }

推荐阅读