동일한 DataSource에 여러 MatPaginator 추가

이 간결한 가이드는 Angular Material 라이브러리를 활용하는 Angular 개발자를 지원합니다. 클라이언트가 특정 기능을 요청했습니다: 모든 MatTable의 위와 아래에 (Mat)Paginator를 표시하는 것입니다.

과제: MatPaginator는 단일 데이터 소스에만 연결할 수 있습니다.

초기 시도에서는 템플릿을 사용하여 페이지네이터를 두 번 렌더링했지만 성공하지 못했습니다. 두 번째 페이지네이터는 작동하지 않는 상태로 유지되었습니다. 서버 측 페이지 매김과 유사한 사용자 정의 페이지 매김 논리 구현이 고려되었지만 여러 페이지에 걸쳐 광범위한 수정이 필요하기 때문에 비현실적인 것으로 간주되었습니다. 두 번째 페이지네이터를 동기화하기 위한 신호 실험도 부족했습니다. 아래 제시된 솔루션은 보다 간단한 접근 방식을 제공합니다.

구현

템플릿:

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

구성요소:

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

설명

기본 MatTable과 MatPaginator가 표준으로 구현됩니다. 연결은 ngAfterViewInit() 후크

내에서 설정됩니다.

두 번째 페이지네이터는 자동으로 업데이트되지 않으므로 해당 속성은 테이블 데이터를 관리하는 첫 번째 페이지네이터에서 파생됩니다. pageChanged() 메소드는 하단 페이지네이터의 페이지 매김 이벤트를 처리하여 그에 따라 첫 번째 페이지네이터와 dataSource를 업데이트합니다. ! 다음에 dataSource.paginator를 사용할 수 있다고 가정하는 null이 아닌 어설션 연산자(ngAfterViewInit)를 사용하는 점에 유의하세요. 프로덕션 코드에 오류 처리를 추가하는 것을 고려해보세요. 또한 더 나은 유형 안전성을 위해 any를 특정 유형으로 바꾸세요.

위 내용은 동일한 DataSource에 여러 MatPaginator 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!