将数据添加到数据源后如何刷新mat-table? [英] How to refresh mat-table after add data to datasource?

问题描述

我正在使用一张垫子表列出内容任务.我也可以使用对话框面板添加新评论.添加评论并返回后，我希望我的数据源刷新以显示它们所做的更改.

I am using a mat-table to list the content task . I can also add new comment using dialog panel. After I added a comment and returned back I want my datasource to refresh to show the changes they made.

private update(value: any, id: string): void {
this.dataService.updateCommentaire(id,value)


.subscribe(
    data => {


   this.dataService
  .getTachesByDossierAndSite(this.idDossier, this.idSite)
  .subscribe(
  data => {
    this.taches = data;
    this.dataSource = new MatTableDataSource(this.taches);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  });
        this.successMessage = "La mise à jour a été effectuée avec succès.";
        this._success.subscribe((message) => this.successMessage = message);
        debounceTime.call(this._success, 5000).subscribe(() => this.successMessage = null);
    }
  );

}

因此，我尝试调用刷新方法，从后端再次获取任务，然后重新初始化数据源:(任何帮助，在将数据添加到数据源后，请刷新mat-table！

So I have tried to call a refresh method where I get the task from the backend again and then I reinitialize the data source :( any help please to refresh mat-table after add data to datasource!!

推荐答案

您可以更新全局数据源，用新的数据变量替换数据设置.

You can update your global datasource replacing the data setting with the new data variable.

例如，您的全局变量:

public dataSource: MatTableDataSource<any[]> = new MatTableDataSource([]);

要更新其数据，只需替换数据变量即可:

To update its data you just replace data variable:

const data = [...this.dataSource.data];

this.dataService
      .getTachesByDossierAndSite(this.idDossier, this.idSite)
      .subscribe(
        data => {
          this.taches = data;
          this.dataSource.dataSource.data = data;
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
        });

这篇关于将数据添加到数据源后如何刷新mat-table?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！