将数据添加到数据源后如何刷新 mat-table？答案

【问题标题】：How to refresh mat-table after add data to datasource?将数据添加到数据源后如何刷新 mat-table？
【发布时间】：2018-05-07 16:55:34
【问题描述】：

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

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 有任何帮助！！

【问题讨论】：

当您尝试重新初始化数据源时发生了什么？有什么例外吗？提供更多信息
我想在将数据添加到数据源后刷新 mat-table 而不再次从后端获取任务并重新初始化数据源
我不明白您的要求？您想在不调用HTTP 后端的情况下刷新表格吗？
你能提供一个关于你到目前为止所做的事情的堆栈吗？
是的，我想在不调用后端的情况下刷新表格

标签： angular

【解决方案1】：

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

例如你的全局变量：

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

要更新其数据，您只需替换数据变量：

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;
        });

【讨论】：