将多个 MatPaginator 添加到同一数据源

这份简明指南可帮助 Angular 开发人员利用 Angular Material 库。客户请求特定功能：在所有 MatTable 上方和下方显示 (Mat)Paginator。

挑战：MatPaginator 只能链接到单个数据源。

最初的尝试涉及使用模板来渲染分页器两次，但这被证明是不成功的；第二个分页器仍然不起作用。 考虑过实现与服务器端分页类似的自定义分页逻辑，但由于需要跨多个页面进行大量修改，因此被认为是不切实际的。 同步第二个分页器的信号实验也失败了。 下面介绍的解决方案提供了一种更直接的方法。

实施

模板：

<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() 钩子内建立的。

由于第二个分页器不会自动更新，因此它的属性源自第一个分页器，后者管理表数据。 pageChanged() 方法处理来自底部分页器的分页事件，相应地更新第一个分页器和 dataSource。 请注意非空断言运算符 (!) 的使用，它假定 dataSource.paginator 在 ngAfterViewInit 之后可用。 考虑为生产代码添加错误处理。 另外，将 any 替换为特定类型以获得更好的类型安全性。

以上是将多个 MatPaginator 添加到同一数据源的详细内容。更多信息请关注PHP中文网其他相关文章！