[英]Two mat-paginator with single or multiple datasource is not working
我有一个垫表,每页最多可显示 5/10/15 个条目。 起初,我在底部有一个垫子分页器,效果很好。 现在我被要求在表格顶部设置一个分页器,在表格底部设置另一个分页器,因此如果用户正在寻找位于顶端。
我试图将两个分页器链接到同一个数据源。 但它没有奏效。 因此,尝试创建 2 个数据源,但它也有一个限制。
唯一的限制是底部的分页器不能更改每页的项目,因为没有一种方法可以让我控制该属性。
另外,我无法直接设置页面索引或每页项目的属性(表格没有刷新),所以所有的动作都是通过一些逻辑和分页器方法来实现的,比如 previousPage() 或 lastPage()。
谁能帮我这个? 我对具有单个或多个数据源的解决方案很好。
工作代码-> STACKBLITZ
<mat-paginator #paginatorTop (page)="pageEvent = handlePageTop($event)" [length]="length" [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
<mat-paginator #paginatorBottom (page)="pageEvent = handlePageBottom($event)" [length]="length" [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
app.component.ts
ngOnInit() {
this.dataSource2.paginator = this.bottomPaginator;
this.dataSource.paginator = this.topPaginator;
this.topPaginator.length = this.dataSource.data.length;
this.bottomPaginator.length = this.dataSource2.data.length;
}
public handlePageTop(e: any) {
let {pageSize} = e;
this.bottomPaginator.pageSize = pageSize;
if(!this.topPaginator.hasNextPage()){
this.bottomPaginator.lastPage();
}else if(!this.topPaginator.hasPreviousPage()){
this.bottomPaginator.firstPage();
}else{
if(this.topPaginator.pageIndex < this.bottomPaginator.pageIndex){
this.bottomPaginator.previousPage();
} else if(this.topPaginator.pageIndex >this.bottomPaginator.pageIndex){
this.bottomPaginator.nextPage();
}
}
}
public handlePageBottom(e: any) {
if(!this.bottomPaginator.hasNextPage()){
this.topPaginator.lastPage();
}else if(!this.bottomPaginator.hasPreviousPage()){
this.topPaginator.firstPage();
}else{
if(this.bottomPaginator.pageIndex < this.topPaginator.pageIndex){
this.topPaginator.previousPage();
} else if(this.bottomPaginator.pageIndex > this.topPaginator.pageIndex){
this.topPaginator.nextPage();
}
}
}
无需使用两个分页器对您的代码进行了一些更改,请检查它。
这是我的 stackblitz 代码:- https://stackblitz.com/edit/multiple-paginators-svwwfj
希望这可以帮助!
如果您想一次显示一个分页器,则此解决方案有效
为了解决上述问题,我创建了一个指令滚动到。 在这个指令中,我监听了滚动事件并将window.pageYOffset
与元素的nativeElement.offsetTop
进行了比较
if (pageYOffset of window < element's offsetTop)
im 设置属性showUpperOne
true 否则属性showLowerOne
true。
import {Directive,HostListener,ElementRef} from '@angular/core'
@Directive(
{
selector:"[scrolledTo]",
exportAs:"scrolledTo"
}
)
export class ScrollDirective {
showUpperOne=true;
showLowerOne=false;
constructor(private el:ElementRef){}
@HostListener("window:scroll",['$event'])
onScroll(){
const elementPosition = this.el.nativeElement.offsetTop;
const scrollPosition = window.pageYOffset;
this.showUpperOne=scrollPosition<elementPosition
this.showLowerOne = scrollPosition>= elementPosition;
}
}
我在 div 上使用了这个指令,它包含两个具有相同模板引用和一个 mat 表的分页器
<div #mainDiv="scrolledTo" scrolledTo class="example-container mat-elevation-z8">
<mat-paginator *ngIf="mainDiv.showUpperOne" #paginator
[pageSize]="currentPageSize"
[pageSizeOptions]="[5, 10, 20]"
(page)="pageEvents($event)"
[showFirstLastButtons]="true">
</mat-paginator>
<mat-table #table [dataSource]="dataSource">...
</mat-table>
<mat-paginator *ngIf="mainDiv.showLowerOne" #paginator
[pageSize]="currentPageSize"
[pageSizeOptions]="[5, 10, 20]"
(page)="pageEvents($event)"
[showFirstLastButtons]="true">
</mat-paginator>
我确实为 div #mainDiv="scrolledTo"
设置了模板引用变量,并访问了指令的属性以分别显示和隐藏分页*ngIf="mainDiv.showLowerOne
"、 *ngIf="mainDiv.showUpperOne"
。
这将在滚动时显示或隐藏分页器,但是一旦一个分页器隐藏,将分页器功能提供给其他分页器就会出现问题。 它必须再次设置为数据源。
为了解决这个问题,我添加了 currentPageSize 属性并将默认值设置为 10 currentPageSize=10;
. 为了将分页器重新分配给数据源,我在分页器模板中使用(page)="pageEvents($event)"
页面事件。 并在 pageEvents function
pageEvents(event){
this.currentPageSize=event.pageSize;
}
也在滚动
@HostListener("window:scroll",['$event'])
onScroll(){
setTimeout(()=> this.dataSource.paginator = this.paginator,0)
}
Stackblitz: https://stackblitz.com/edit/angular-nbtcgz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.