Question

我有一个具有可扩展行（https://material.angular.io/components/table/examples）的物料表，并且希望将删除操作管理到表本身中，因此我创建了具有触发删除事件的功能的删除按钮。该api有效，该记录已正确删除，但删除后该表未刷新，我想实现此行为。这是使用虚假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);
  }
 );
}

我尝试使用this solution too，但不起作用。我尝试使用ngOnChange和ngOnDestroy，但无法正常工作...

有人可以帮我吗？

Answer 1

无需调用服务器以获取更新的数据并再次下载所有数据。只需调用此函数（如下）并删除dataSource中的行（拼接）即可。从您的删除函数中传递记录ID，无论您的ID所在的列名是什么，魔术都会发生。我包括分页器。

我的StackBlitz for Angular Material Table有一个有效的例子。另请参阅我用于创建和更新的UpdateDatatableService。

Highcharts.chart('container', {
chart: {
    type: 'xrange'
},
title: {
    text: 'Highcharts X-range'
},
xAxis: {
    //type: 'datetime'
    //categories: [ '1','2'],
    min: 0,
    max: 6,
    title: {
                                text: "Ghz",
                                align: "high"
                            },

},
yAxis: {
    title: {
        text: ''
    },
    categories: ['Prototyping', 'Development', 'Testing'],
    reversed: true
},
plotOptions: {
  series: {
    grouping: false
  }
},
series: [{
    name: 'Allocated for IMT/official plans',
     pointPadding: 0,
     groupPadding: 0,
     color: '#123456',
     showInLegend :true,
  //  borderColor: 'gray',
    //pointWidth: 20,
    data: [{
        x: 0.7,
        x2: 0.8,
        y: 0,
        color: '#123456',
        //partialFill: 0.25
    }, {
        x: 3.4,
        x2: 3.6,
        y: 0,
        color: '#123456',
    }, {
        x: 3.3,
        x2: 3.6,
        y: 1,
        color: '#123456',
    }, {
        x: 4.8,
        x2: 5.0,
        y: 1,
        color: '#123456',
   }]
}, {
    name: 'Considered',
     pointPadding: 0,
     groupPadding: 0,
     color: 'red',
     showInLegend :true,
  //  borderColor: 'gray',
    //pointWidth: 20,
    data: [{
        x: 4.4,
        x2: 4.5,
        y: 1,
        color: 'red',
        //partialFill: 0.25
    }, {
        x: 5.9,
        x2: 6,
        y: 0,
        color: 'red',
    }, {
        x: 3.3,
        x2: 3.6,
        y: 1,
        color: '#123456',
    }, {
        x: 4.8,
        x2: 5.0,
        y: 1,
        color: '#123456',
   }]
}]

});

Answer 2

我解决了每次刷新客户列表时都为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 3

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

在HTML模板中，为<table mat-table>元素赋予属性绑定：

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

在组件类中，使用@ViewChild链接到模板属性，并在表数据更改时调用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();

}

删除记录后的角度刷新表，使用物料表和REST API

3 个答案: