複数の MatPaginator を同じ DataSource に追加する

この簡潔なガイドは、Angular マテリアル ライブラリを利用する Angular 開発者を支援します。クライアントが特定の機能をリクエストしました: すべての MatTable の上と下の両方に (Mat)Paginator を表示します。

課題: MatPaginator は単一の DataSource にしかリンクできません。

最初の試みでは、テンプレートを使用してページネーターを 2 回レンダリングすることが含まれていましたが、これは失敗したことが判明しました。 2 番目のページネーターは機能しないままでした。 サーバー側のページネーションと同様のカスタム ページネーション ロジックの実装が検討されましたが、複数のページにわたって広範な変更が必要となるため、実用的ではないと判断されました。 2 番目のページネーターを同期する信号の実験も失敗しました。 以下に示すソリューションは、より単純なアプローチを提供します。

実装

テンプレート:

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

コンポーネント:

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

説明

プライマリ MatTable と MatPaginator は標準として実装されています。 接続は ngAfterViewInit() フック内で確立されます。

2 番目のページネーターは自動的に更新されないため、そのプロパティはテーブル データを管理する最初のページネーターから派生します。 pageChanged() メソッドは、下部のページネーターからのページネーション イベントを処理し、それに応じて最初のページネーターと dataSource を更新します。 ! が dataSource.paginator の後に使用可能であることを前提とした非 null アサーション演算子 (ngAfterViewInit) の使用に注意してください。 製品コードにエラー処理を追加することを検討してください。 また、型の安全性を高めるために、any を特定の型に置き換えます。

以上が複数の MatPaginator を同じ DataSource に追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。