Angular 删除记录后刷新 table，使用 material table 并休息 api

Question

我有一个 material Table 具有可扩展的行（https://material.angular.io/components/table/examples) and I want to manage delete into the table itself, so I create a delete button with a function that trigger the delete event. The api works, the record is correctly deleted, but the table is not refreshed after delete, and I want to implement this behaviour. Here a stackblitz with fake api: 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

我解决了每次刷新客户列表时为 mat-table 创建新数据源的问题。我需要向我的构造函数提供 ChangeDetectorRef，然后编写此代码：

refreshCustomersList() {
 this.api.getCustomers()
  .subscribe(res => {
    console.log(res);
    this.clienti = res;
    this.dataSource = new ClientiDataSource(this.api);
    this.changeDetectorRefs.detectChanges();
  }, err => {
    console.log(err);
 });
}

而且有效！

注意：只有在使用 mat-table 数据源时才会出现此问题

Answer 2

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

我用于创建和更新的 StackBlitz for Angular Material Table has a working example. Also see my 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;
  }

Answer 3

Angular 文档显示有一种方法 renderRows() 可用于 <table mat-table> 元素。我遇到了同样的问题，实现了这个方法，效果很好。我还了解到您可以选择提供数据流而不是简单数据。下面解决简单数据行的渲染。

在您的 HTML 模板中，为 <table mat-table> 元素提供一个属性绑定：

<table mat-table [dataSource]="data" #myTable> <!-- #table binding here -->
  <!-- table cells content etc... -->
</table>

在你的组件class中，link用@ViewChild到模板属性，当table数据变化时调用renderRows()方法。

import { MatTable } from '@angular/material/table';

export class MyComponent {
    @ViewChild('myTable') myTable: MatTable<any>; /*not exatly sure what the type should be set too */

    editDataMethod(){
        /* data handling logic */
        this.myTable.renderRows();

}

Angular 删除记录后刷新 table，使用 material table 并休息 api

Angular refresh table after delete record, using material table and rest api

rest

refresh

http-delete

angular-material

angular