Ajout de plusieurs MatPaginators à la même DataSource

Ce guide concis aide les développeurs Angular à utiliser la bibliothèque de matériaux Angular. Un client a demandé une fonctionnalité spécifique : afficher un (Mat)Paginator au-dessus et en dessous de tous les MatTables.

Le défi : Un MatPaginator ne peut être lié qu'à un seul DataSource.

Les premières tentatives impliquaient l'utilisation de modèles pour afficher le paginateur deux fois, mais cela s'est avéré infructueux ; le deuxième paginateur est resté non fonctionnel. La mise en œuvre d'une logique de pagination personnalisée, similaire à la pagination côté serveur, a été envisagée, mais jugée peu pratique en raison des modifications importantes requises sur plusieurs pages. Les expériences avec des signaux pour synchroniser le deuxième paginateur ont également échoué. La solution présentée ci-dessous offre une approche plus simple.

Mise en œuvre

Modèle :

<code class="language-html"><mat-paginator [pageSize]="50"></mat-paginator>
<table mat-table>...</table>
<mat-paginator (page)="pageChanged($event)"></mat-paginator></code>

Composant :

<code class="language-typescript">import { Component, AfterViewInit, ViewChild, Input } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { effect } from '@angular/core';


@Component(/* ... */)
export class DocumentListComponent implements AfterViewInit {
  @Input() documents!: any[]; // input of the data;  Use a more specific type if possible.

  dataSource = new MatTableDataSource<any>(); // dataSource of the table; Use a more specific type if possible.

  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;

  constructor() {
    effect(() => this.dataSource.data = this.documents);
  }

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
  }

  pageChanged(event: PageEvent): void {
    this.dataSource.paginator!.pageIndex = event.pageIndex;
    this.dataSource.paginator!._changePageSize(event.pageSize);
  }
}</code>

Explication

Les principaux MatTable et MatPaginator sont implémentés en standard. La connexion est établie au sein du ngAfterViewInit() hook.

Comme le deuxième paginateur ne se met pas à jour automatiquement, ses propriétés sont dérivées du premier paginateur, qui gère les données du tableau. La méthode pageChanged() gère les événements de pagination du paginateur inférieur, mettant à jour le premier paginateur et le dataSource en conséquence. Notez l'utilisation de l'opérateur d'assertion non nul (!) qui suppose que dataSource.paginator sera disponible après ngAfterViewInit. Pensez à ajouter la gestion des erreurs pour le code de production. Remplacez également any par un type spécifique pour une meilleure sécurité de type.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!