How to refresh mat-table after add data to datasou

问题:

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

}

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!!

回答1:

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

For example your global 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;
        });