Angular + Material - Comment rafraîchir une source de données (mat-table)

Question

J'utilise un tapis-table pour lister le contenu des langues choisies par les utilisateurs. Ils peuvent également ajouter de nouvelles langues en utilisant le panneau de dialogue. Après avoir ajouté une langue et être revenu. Je veux que ma source de données soit rafraîchie pour montrer les changements qu'ils ont faits.

J'initialise le datastore en récupérant les données de l'utilisateur depuis un service et en les passant dans une source de données dans la méthode de rafraîchissement.

Language.component.ts

import { Component, OnInit } from '@angular/core';
import { LanguageModel, LANGUAGE_DATA } from '../../../../models/language.model';
import { LanguageAddComponent } from './language-add/language-add.component';
import { AuthService } from '../../../../services/auth.service';
import { LanguageDataSource } from './language-data-source';
import { LevelbarComponent } from '../../../../directives/levelbar/levelbar.component';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { MatSnackBar, MatDialog } from '@angular/material';

@Component({
  selector: 'app-language',
  templateUrl: './language.component.html',
  styleUrls: ['./language.component.scss']
})
export class LanguageComponent implements OnInit {

  displayedColumns = ['name', 'native', 'code', 'level'];
  teachDS: any;
  user: any;

  constructor(private authService: AuthService, private dialog: MatDialog) { }

  ngOnInit() {
    this.refresh();
  }

  add() {
    this.dialog.open(LanguageAddComponent, {
      data: { user: this.user },
    }).afterClosed().subscribe(result => {
      this.refresh();
    });
  }

  refresh() {
    this.authService.getAuthenticatedUser().subscribe((res) => {
      this.user = res;
      this.teachDS = new LanguageDataSource(this.user.profile.languages.teach);   
    });
  }
}

langue-données-source.ts

import {MatPaginator, MatSort} from '@angular/material';
import {DataSource} from '@angular/cdk/collections';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';

export class LanguageDataSource extends DataSource<any> {

  constructor(private languages) {
    super();
  }

  connect(): Observable<any> {
    return Observable.of(this.languages);
  }

  disconnect() {
    // No-op
  }

}

J'ai donc essayé d'appeler une méthode de rafraîchissement où je récupère à nouveau l'utilisateur depuis le backend, puis je réinitialise la source de données. Cependant, cela ne fonctionne pas, aucun changement ne se produit.

Answer 1

Je ne sais pas si le ChangeDetectorRef était nécessaire lorsque la question a été créée, mais cela suffit désormais :

import { MatTableDataSource } from '@angular/material/table';

// ...

dataSource = new MatTableDataSource<MyDataType>();

refresh() {
  this.myService.doSomething().subscribe((data: MyDataType[]) => {
    this.dataSource.data = data;
  }
}

Exemple :
StackBlitz

Answer 2

Déclenchez une détection de changement en utilisant ChangeDetectorRef dans le refresh() méthode juste après avoir reçu les nouvelles données, injecter ChangeDetectorRef dans le constructeur et utiliser detectChanges comme ça :

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { LanguageModel, LANGUAGE_DATA } from '../../../../models/language.model';
import { LanguageAddComponent } from './language-add/language-add.component';
import { AuthService } from '../../../../services/auth.service';
import { LanguageDataSource } from './language-data-source';
import { LevelbarComponent } from '../../../../directives/levelbar/levelbar.component';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { MatSnackBar, MatDialog } from '@angular/material';

@Component({
  selector: 'app-language',
  templateUrl: './language.component.html',
  styleUrls: ['./language.component.scss']
})
export class LanguageComponent implements OnInit {
  displayedColumns = ['name', 'native', 'code', 'level'];
  teachDS: any;

  user: any;

  constructor(private authService: AuthService, private dialog: MatDialog,
              private changeDetectorRefs: ChangeDetectorRef) { }

  ngOnInit() {
    this.refresh();
  }

  add() {
    this.dialog.open(LanguageAddComponent, {
      data: { user: this.user },
    }).afterClosed().subscribe(result => {
      this.refresh();
    });
  }

  refresh() {
    this.authService.getAuthenticatedUser().subscribe((res) => {
      this.user = res;
      this.teachDS = new LanguageDataSource(this.user.profile.languages.teach);
      this.changeDetectorRefs.detectChanges();
    });
  }
}

Answer 3

Donc pour moi, personne n'a donné la bonne réponse au problème que j'ai rencontré qui est presque le même que @Kay. Pour moi, il s'agit de trier, le tri de la table n'entraîne pas de changements dans la matrice. Je cherche cette réponse car c'est le seul sujet que j'ai trouvé en cherchant sur Google. J'utilise Angular 6.

Comme dit ici :

Comme la table optimise les performances, elle ne vérifie pas automatiquement les modifications apportées au tableau de données. En revanche, lorsque des objets sont ajoutés, supprimés ou déplacés dans le tableau de données, vous pouvez déclencher une mise à jour des lignes rendues du tableau en appelant la méthode renderRows().

Donc vous devez juste appeler renderRows() dans votre rafraîchir() pour effectuer vos modifications apparaît.

Voir ici pour l'intégration.

Answer 4

Puisque vous utilisez MatPaginator il suffit de modifier le paginateur pour que les données soient rechargées.

Un truc simple :

this.paginator._changePageSize(this.paginator.pageSize); 

Cela met à jour la taille de la page en fonction de la taille actuelle de la page, de sorte que rien ne change, à l'exception de la propriété privée de la page. _emitPageEvent() est également appelée, ce qui déclenche le rechargement de la table.

Answer 5

this.dataSource = new MatTableDataSource<Element>(this.elements);

Ajoutez cette ligne en dessous de votre action d'ajout ou de suppression d'une ligne particulière.

refresh() {
  this.authService.getAuthenticatedUser().subscribe((res) => {
    this.user = new MatTableDataSource<Element>(res);   
  });
}