web-dev-qa-db-fra.com

La bonne méthode de mise à jour d'un MatTableDataSource dans angular 2 version 6

J'ai une liste qui utilise le composant mat-table qui est alimenté par MatTableDataSource.

dans le component.html

<table mat-table [dataSource]="dataSource" matSort>

dans le component.ts

dataSource = new MatTableDataSource();

lorsque je clique pour supprimer un élément, lors du rappel de succès du serveur, je mets à jour la liste pour refléter le nouvel ensemble de résultats en réinstanciant MatTableDataSource (this.resources) et passe le nouvel ensemble de résultats comme tel. Cela fonctionne ...

this.PHService.getResources().subscribe(resources => {
  this.resources = resources;
  this.dataSource = new MatTableDataSource(this.resources);
  this.dataSource.sort = this.sort;
});

Cependant, même si cela fonctionne, je pense que c'est faux.

J'ai lu certains articles qui stipulent que je dois étendre la source de données? et appeler la méthode renderRows ()? J'ai essayé cela et je n'arrive pas à le faire fonctionner dans mon scénario.

Je sais que c'est un manque de compréhension de ma part.

Toute aide/conseil serait grandement apprécié.

Merci d'avance.

angularangular-material-6mat-table
6
Adamski

J'ai trouvé une meilleure méthode, qui évite d'avoir à injecter le service ChangeDetectorRefs en utilisant le décorateur de propriétés @ViewChild.

Voici un exemple de code:

@ViewChild(MatTable) table: MatTable<any>;

puis appelez simplement la méthode renderRows () sur ce décorateur de propriétés, exemple ci-dessous:

  refresh(): void{
    this.service.method().subscribe(resources => {
      this.dataSource.data = resources; 
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    });
    this.table.renderRows();
  }

C'est la meilleure solution à ce problème que j'ai trouvée et qui fonctionne jusqu'à présent pour moi.

Utilisation de Angular Material 6.4.7.

J'espère que cela t'aides.

2
Adamski