Hinzufügen mehrerer MatPaginators zur gleichen DataSource

Dieser prägnante Leitfaden unterstützt Angular-Entwickler bei der Nutzung der Angular-Materialbibliothek. Ein Kunde hat eine bestimmte Funktion angefordert: Anzeige eines (Mat)Paginators sowohl über als auch unter allen MatTables.

Die Herausforderung: Ein MatPaginator kann nur mit einer einzigen DataSource verknüpft werden.

Anfängliche Versuche umfassten die Verwendung von Vorlagen, um den Paginator zweimal darzustellen, aber dies erwies sich als erfolglos; der zweite Paginator blieb funktionsunfähig. Die Implementierung einer benutzerdefinierten Paginierungslogik, ähnlich der serverseitigen Paginierung, wurde in Betracht gezogen, aber aufgrund der umfangreichen Änderungen, die über mehrere Seiten hinweg erforderlich waren, als unpraktisch erachtet. Experimente mit Signalen zur Synchronisierung des zweiten Paginators scheiterten ebenfalls. Die unten vorgestellte Lösung bietet einen einfacheren Ansatz.

Umsetzung

Vorlage:

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

Komponente:

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

Erklärung

Der primäre MatTable und MatPaginator sind standardmäßig implementiert. Die Verbindung wird innerhalb des ngAfterViewInit() Hooks.

hergestellt

Da der zweite Paginator nicht automatisch aktualisiert wird, werden seine Eigenschaften vom ersten Paginator abgeleitet, der die Tabellendaten verwaltet. Die pageChanged()-Methode verarbeitet Paginierungsereignisse vom unteren Paginator und aktualisiert den ersten Paginator und den dataSource entsprechend. Beachten Sie die Verwendung des Nicht-Null-Behauptungsoperators (!), der davon ausgeht, dass dataSource.paginator nach ngAfterViewInit verfügbar sein wird. Erwägen Sie das Hinzufügen einer Fehlerbehandlung für Produktionscode. Ersetzen Sie außerdem any durch einen bestimmten Typ, um die Typsicherheit zu erhöhen.

Das obige ist der detaillierte Inhalt vonHinzufügen mehrerer MatPaginators zur gleichen DataSource. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!