이것은 내 mat-paginator모습입니다.
<mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="100"></mat-paginator>
기본적으로 일반적인 페이지 매김 아이디어를 구현하려고합니다. 서버는 모든 데이터를 반환하지 않고 데이터 청크를 반환 한 다음 새 페이지가 열리면 데이터의 다른 부분으로 이동합니다. 이를 위해서는 페이지 관리자에게 데이터베이스에 얼마나 많은 항목이 있는지 알려야합니다. 즉, length소품 과 함께 제공해야합니다 .
위의 줄이나 get 요청을 만드는 메서드 내부와 같은 다양한 방법으로 설정을 시도했습니다. 이렇게 :
this.paginator.length = 100;
실제로 길이는 서버에서 가져와야하지만 당분간은 디버그 목적으로 하드 코딩하기 만하면됩니다.
this.dataSourceService.findAll().subscribe(
records => {
this.paginator.length = 100;
this.dataSource.data = records.map(
record => new Record().deserialize(record)
)
}
)
여전히 클라이언트에서 얻는 길이 값은 서버 응답에서 얻는 배열에 포함 된 항목의 수와 같습니다.
내가 뭘 잘못하고 길이 값이 100으로 설정되지 않은 이유.
편집 :
좋습니다. 여기에 더 관련성 높은 코드가 있습니다.
구성 요소 내에서 다음을 수행합니다.
dataSource = new MatTableDataSource<Record>();
pageSizeOptions: number[] = [5, 10, 20];
내부에는 OnInit()다음 줄도 있습니다.this.dataSource.paginator = this.paginator;
나는 이것을 이렇게 사용하고있다
<mat-paginator
[pageSize]="pageSize"
[pageIndex]="pageNumber-1"
[pageSizeOptions]="[10, 25, 50, 100]"
[length]="itemCount"
(page)="changePaging($event)"
>
관찰 가능 항목의 반환이 객체라고 가정 해 보겠습니다. {list : [], count : xx} count는 전체 항목 (페이지 매김 없음)입니다.
this.list$ = this.dataSourceService
.findAll()
.pipe(tap(r => (this.itemCount = r.count)));
물론 더 많은 작업을 위해 그 후에 구독 할 수 있습니다 ...
https://material.angular.io/components/paginator/api 문서도 확인 하십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다