如何使用材料角的分页器?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用材料角的分页器?相关的知识,希望对你有一定的参考价值。
我是角色的新手,并试图在我的应用程序中实现分页。我正在尝试使用this material component.
使用下面的代码,我可以在我的length
文件中获取pagesize
,pageSizeOptions
和.ts
<md-paginator [length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
</md-paginator>
export class PaginatorConfigurableExample {
length = 100;
pageSize = 10;
pageSizeOptions = [5, 10, 25, 100];
}
}
但是,当页面被更改时,我似乎无法触发更改上表中数据的功能。另外,我如何使用nextPage
,previousPage
,hasNextPage
和hasPreviousPage
方法?
我在这里苦苦挣扎。但我可以告诉你我做了一些研究。基本上,您首先开始在foo.template.ts中添加页面@Output事件:
<md-paginator #paginator
[length]="length"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[pageSizeOptions]="[5, 10, 25, 100]"
(page)="pageEvent = getServerData($event)"
>
</md-paginator>
之后,您必须在foo.component.ts类和其他类中添加pageEvent属性来处理分页器要求:
pageEvent: PageEvent;
datasource: null;
pageIndex:number;
pageSize:number;
length:number;
并添加将获取服务器数据的方法:
ngOnInit() {
getServerData(null) ...
}
public getServerData(event?:PageEvent){
this.fooService.getdata(event).subscribe(
response =>{
if(response.error) {
// handle error
} else {
this.datasource = response.data;
this.pageIndex = response.pageIndex;
this.pageSize = response.pageSize;
this.length = response.length;
}
},
error =>{
// handle error
}
);
return event;
}
因此,基本上每次单击paginator时,都会激活getServerData(..)方法,该方法将调用foo.service.ts获取所需的所有数据。在这种情况下,您不需要处理nextPage和nextXXX事件,因为它将在视图呈现时自动计算。
希望这可以帮到你。如果你有成功,请告诉我。 =]
嘿所以我偶然发现了它,并使它工作,这是如何:
在我的component.html中
<mat-paginator #paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize"
[pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>
在我的组件里面
public array: any;
public displayedColumns = ['', '', '', '', ''];
public dataSource: any;
public pageSize = 10;
public currentPage = 0;
public totalSize = 0;
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private app: AppService) { }
ngOnInit() {
this.getArray();
}
public handlePage(e: any) {
this.currentPage = e.pageIndex;
this.pageSize = e.pageSize;
this.iterator();
}
private getArray() {
this.app.getDeliveries()
.subscribe((response) => {
this.dataSource = new MatTableDataSource<Element>(response);
this.dataSource.paginator = this.paginator;
this.array = response;
this.totalSize = this.array.length;
this.iterator();
});
}
private iterator() {
const end = (this.currentPage + 1) * this.pageSize;
const start = this.currentPage * this.pageSize;
const part = this.array.slice(start, end);
this.dataSource = part;
}
所有的分页工作都是在iterator
方法中完成的。这个方法解决了skip
和take
并将其分配给材料表的dataSource
。
使用Slice Pipe将Angular Paginator与数据表链接的另一种方法。这些数据仅从服务器获取一次。
视图:
<div class="col-md-3" *ngFor="let productObj of productListData |
slice: lowValue : highValue">
//actual data dispaly
</div>
<mat-paginator [length]="productListData.length" [pageSize]="pageSize"
(page)="pageEvent = getPaginatorData($event)">
</mat-paginator>
零件
pageIndex:number = 0;
pageSize:number = 50;
lowValue:number = 0;
highValue:number = 50;
getPaginatorData(event){
console.log(event);
if(event.pageIndex === this.pageIndex + 1){
this.lowValue = this.lowValue + this.pageSize;
this.highValue = this.highValue + this.pageSize;
}
else if(event.pageIndex === this.pageIndex - 1){
this.lowValue = this.lowValue - this.pageSize;
this.highValue = this.highValue - this.pageSize;
}
this.pageIndex = event.pageIndex;
}
原始问题中的问题是您没有捕获“页面”事件,要解决此问题,您需要在md-paginator标记中添加(page)='yourEventHandler($event)
'作为属性。
检查一个工作示例here
您还可以查看API文档here
零件:
import { Component, AfterViewInit, ViewChild } from @angular/core;
import { MatPaginator } from @angular/material;
export class ClassName implements AfterViewInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
length = 1000;
pageSize = 10;
pageSizeOptions: number[] = [5, 10, 25, 100];
ngAfterViewInit() {
this.paginator.page.subscribe(
(event) => console.log(event)
);
}
HTML
<mat-paginator
[length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
[showFirstLastButtons]="true">
</mat-paginator>
花了几个小时后,我认为这是应用分页的最佳方式。更重要的是它有效。这是我的分页器代码<mat-paginator #paginatoR [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">
在我的组件@ViewChild(MatPaginator) paginator: MatPaginator;
内部查看子项,最后你必须将paginator绑定到表dataSource,这是怎么做的ngAfterViewInit() {this.dataSource.paginator = this.paginator;}
Easy对吗?如果它适合你,那么将其标记为答案。
以上是关于如何使用材料角的分页器?的主要内容,如果未能解决你的问题,请参考以下文章