删除记录后角度刷新表，使用材质表和rest api

Question

我有一个带有可扩展行的材质表（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，但也不起作用......

有人可以帮助我吗？

Answer 1

无需调用服务器获取更新后的数据并重新下载所有数据。只需调用此函数（如下）并删除数据源中的行（拼接）即可。从删除函数中传递记录 ID 以及您的 ID 所在的列名称，然后神奇的事情就发生了。我包括分页器。

我的StackBlitz for Angular Material Table有一个工作示例。另请参阅我用于创建和更新的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;
  }