Angular Material Table : Détecter les lignes (éléments) qui sont actuellement affichées

Question

J'ai besoin d'un moyen de suivre les éléments (lignes) actuellement affichés dans un tableau de matériaux. Selon la documentation, est construit sur , lui donnant une propriété viewChange. Je comprends que ce BehaviorSubject se déclenche à chaque fois que l'ensemble des lignes affichées change. Par exemple, il peut y avoir 400 lignes au total, mais en raison de la pagination, seules 20 sont à l'écran. Lorsque l'utilisateur clique pour passer à la page suivante, cela devrait déclencher viewChange. Est-ce que quelqu'un sait comment utiliser cette propriété? J'ai essayé le code suivant, mais il ne se déclenche qu'une fois, avec la valeur { start: 0, end: 1.7976931348623157e+308 }.

component.ts:

allTasks = new MatTableDataSource([]);

@ViewChild(MatTable) table: MatTable;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sorter: MatSort;

ngAfterViewInit() {
  this.allTasks.paginator = this.paginator;
  this.allTasks.sort = this.sorter;
  this.table.viewChange.asObservable().subscribe(val => {
    console.log(`${val.start} - ${val.end}`);
  });
}

component.html:

...

Answer 1

Une façon d'afficher les lignes est d'utiliser l'abonnement du paginateur et d'utiliser l'index de page pour obtenir les données de la source de données.

allTasks = new MatTableDataSource([]);

@ViewChild(MatTable) table: MatTable;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sorter: MatSort;

ngAfterViewInit() {
  this.allTasks.paginator = this.paginator;
  this.allTasks.sort = this.sorter;

  this.allTasks.paginator.page.subscribe((pageEvent: PageEvent) => {
      const startIndex = pageEvent.pageIndex * pageEvent.pageSize;
      const endIndex = startIndex + pageEvent.pageSize;
      const itemsShowed = this.allTasks.filteredData.slice(startIndex, endIndex);
      console.log(itemsShowed);
  });

}

Answer 2

Il semble que le support approprié pour viewChange soit un élément TODO dans le code d'Angular Material. Voici un extrait de la dernière version en date d'aujourd'hui.

// TODO(andrewseguin): Supprimer la valeur maximale comme indice de fin
//   et calculer plutôt la vue à l'initialisation et au défilement.
/**
 * Flux contenant les dernières informations sur les lignes affichées à l'écran.
 * Peut être utilisé par la source de données comme heuristique sur les données à fournir.
 */
viewChange: BehaviorSubject<{début: number, fin: number}> =
    new BehaviorSubject<{début: number, fin: number}>({début: 0, fin: Number.MAX_VALUE});

Et il n'est jamais utilisé dans le composant.

Answer 3

Alors que la solution de Daniel fonctionne parfaitement, j'ai trouvé quelque chose de plus simple.

this.allTasks.connect().value

vous donnera les lignes affichées à l'écran pour la page actuelle.

Si vous voulez toutes les lignes filtrées (qui peuvent être affichées sur plusieurs pages), vous pouvez également utiliser :

this.allTasks.filteredData