Menambah berbilang MatPaginator pada DataSource yang sama

Panduan ringkas ini membantu pembangun Angular menggunakan perpustakaan Bahan Sudut. Pelanggan meminta ciri khusus: Memaparkan (Mat)Paginator di atas dan di bawah semua MatTable.

Cabarannya: MatPaginator hanya boleh dipautkan kepada satu Sumber Data.

Percubaan awal melibatkan penggunaan templat untuk memaparkan penomboran dua kali, tetapi ini terbukti tidak berjaya; penomboran kedua kekal tidak berfungsi. Melaksanakan logik penomboran tersuai, serupa dengan penomboran sebelah pelayan, telah dipertimbangkan tetapi dianggap tidak praktikal disebabkan oleh pengubahsuaian meluas yang diperlukan merentas berbilang halaman. Percubaan dengan isyarat untuk menyegerakkan penomboran kedua juga gagal. Penyelesaian yang dibentangkan di bawah menawarkan pendekatan yang lebih mudah.

Pelaksanaan

Templat:

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

Komponen:

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);
  }
}

Penjelasan

MatTable dan MatPaginator utama dilaksanakan sebagai standard. Sambungan diwujudkan dalam cangkuk ngAfterViewInit().

Memandangkan penomboran kedua tidak dikemas kini secara automatik, sifatnya diperoleh daripada penomboran pertama, yang menguruskan data jadual. Kaedah pageChanged() mengendalikan acara penomboran dari penomboran bawah, mengemas kini penomboran pertama dan dataSource dengan sewajarnya. Perhatikan penggunaan pengendali penegasan bukan nol (!) yang menganggap dataSource.paginator akan tersedia selepas ngAfterViewInit. Pertimbangkan untuk menambah pengendalian ralat untuk kod pengeluaran. Selain itu, gantikan any dengan jenis tertentu untuk keselamatan jenis yang lebih baik.

Atas ialah kandungan terperinci Menambah berbilang MatPaginator pada DataSource yang sama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!