如何从材料角度使用分页器？

我是新的角度和尝试实现分页在我的应用程序。我正在尝试使用 这个物质组成部分。

通过下面的代码，我可以在我的 .ts文件中获得 length、 pagesize和 pageSizeOptions

<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方法？

188724 次浏览
小开
最佳答案

我也很纠结，但我可以给你看看我的研究成果。 基本上，首先在 Foo.template. ts中添加 page@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;
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;
}

因此，基本上，每次单击分页器时，都会激活 getServerData (。.)方法，该方法将调用 Foo.service.ts以获取所需的所有数据。在这种情况下，您不需要处理 下一页和 下集预告事件，因为它们将在视图呈现时自动计算。

我希望这能帮到你。如果你成功了，请告诉我

小开

嘿，我无意中发现了这个，并且让它工作起来，这里是如何:

在我的 组件里面

<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。

小开

在花了几个小时之后，我认为这是应用分页的最好方法，更重要的是它的工作原理。 这是我的分页码 <mat-paginator #paginatoR [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">

在我的组件 @ViewChild(MatPaginator) paginator: MatPaginator;中查看 child，最后必须将 paginator 绑定到 table dataSource，这就是操作方法 ngAfterViewInit() {this.dataSource.paginator = this.paginator;} 很简单，对吧? 如果对你有用，那就把这个标记为答案。

小开

原始问题中的问题是您没有捕获“ page”事件，为了解决这个问题，您需要在 md-paginator 标记中添加 (page)='yourEventHandler($event)’作为属性。

检查一个工作实例 给你

您还可以检查 API 文档 给你

小开

利用切片管将角分页器与数据表连接的另一种方法。这里只从服务器获取一次数据。

观看内容:

 <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;
}
小开

组成部分:

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

超文本标示语言

<mat-paginator
[length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
[showFirstLastButtons]="true">
</mat-paginator>
小开

这个问题花了几个小时就解决了，我把它修好了。这被认为是解决有角材料的分页问题最简单的方法。 - 首先从处理(Component ent.html)文件开始

 <mat-paginator [pageSizeOptions]="[2, 5, 10, 15, 20]" showFirstLastButtons>
</mat-paginator>

并在(Component. ts)文件中执行

 import { MatPaginator } from '@angular/material/paginator';
import { Component, OnInit, ViewChild } from '@angular/core';


export interface UserData {
full_name: string;
email: string;
mob_number: string;
}


export class UserManagementComponent implements OnInit{
dataSource : MatTableDataSource<UserData>;


@ViewChild(MatPaginator) paginator: MatPaginator;


constructor(){
this.userList();
}


ngOnInit() { }


public userList() {


this._userManagementService.userListing().subscribe(
response => {


console.log(response['results']);
this.dataSource = new MatTableDataSource<UserData>(response['results']);
this.dataSource.paginator = this.paginator;
console.log(this.dataSource);


},




error => {});


}


}

记住 必须导入当前工作模块(module.ts)文件中的分页模块。

  import {MatPaginatorModule} from '@angular/material/paginator';


@NgModule({
imports: [MatPaginatorModule]
})

希望对你有用。

小开

基于 Wesley Coetzee 的回答，我写了这个。希望它可以帮助任何人谷歌这个问题。我在列表的中间交换分页大小时有 bug，这就是为什么我要提交我的答案:

分页器 html 和列表

<mat-paginator [length]="localNewspapers.length" pageSize=20
(page)="getPaginatorData($event)" [pageSizeOptions]="[10, 20, 30]"
showFirstLastButtons="false">
</mat-paginator>
<mat-list>
<app-newspaper-pagi-item *ngFor="let paper of (localNewspapers |
slice: lowValue : highValue)"
[newspaper]="paper">
</app-newspaper-pagi-item>

组件逻辑

import {Component, Input, OnInit} from "@angular/core";
import {PageEvent} from "@angular/material";


@Component({
selector: 'app-uniques-newspaper-list',
templateUrl: './newspaper-uniques-list.component.html',
})
export class NewspaperUniquesListComponent implements OnInit {
lowValue: number = 0;
highValue: number = 20;


// used to build a slice of papers relevant at any given time
public getPaginatorData(event: PageEvent): PageEvent {
this.lowValue = event.pageIndex * event.pageSize;
this.highValue = this.lowValue + event.pageSize;
return event;
}


}
小开

这里棘手的部分是处理页面事件。 我们可以遵循角材料文件，直到定义页面事件函数。

访问 < href = “ https://medial.angular.io/Component/paginator/example”rel = “ nofollow norefrer”> https://material.angular.io/components/paginator/examples 作为参考。

在这方面，我将加倍努力工作。 在有关的 HTML 档案内，应如下所示:

<pre>
<mat-paginator
[pageSizeOptions]="pageSizeOptions"
[pageSize]="Size"
(page)="pageEvent = pageNavigations($event)"
[length]="recordCount">
</mat-paginator>
</pre>

然后转到相关的打印脚本文件和下面的代码,

声明,

@Input('data') customers: Observable<Customer[]>;
pageEvent: PageEvent;
Page: number=0;
Size: number=2;
recordCount: number;
pageSizeOptions: number[] = [2,3,4,5];

页面导航的关键部分如下,

pageNavigations(event? : PageEvent){
console.log(event);
this.Page = event.pageIndex;
this.Size = event.pageSize;
this.reloadData();
}

我们需要以下函数从后端调用数据。

reloadData() {


this.customers = this.customerService.setPageSize(this.Page ,this.Size);
this.customerService.getSize().subscribe(res => {
this.recordCount = Number(res);
     

console.log(this.recordCount);
});
}

在上述实现之前，我们的服务文件应该包含以下服务调用

setPageSize(page: number, size: number): Observable<any> {
return this.http.get(`${this.baseUrl}?pageSize=${size}&pageNo=${page}`);
}

然后所有设置去，并在我们的应用程序中启用分页。随时提出相关的问题谢谢你。

小开

这对我有用:

确保在 ngOnInit()中定义了数据源(避免在 ngViewAfterInit函数中定义了数据源) . . 类似这样的

dataSource: MatTableDataSource<Listing> = new MatTableDataSource();
pageEvent: PageEvent;
datasource: null;
pageSizeOptions: number[] = [5, 10, 12, 15];
pageIndex: number;
pageSize: number;
length: number;


constructor(private yourService: YourService) {
}
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.pageIndex=0;
this.pageSize=10;
this.yourService.getListItems(this.pageSize,
this.pageIndex).subscribe(res => {
this.dataSource.data = res;
this.lenght=res.lenght();
});
}
handlePageEvent(event: PageEvent) {
this.yourService.getListItems(event.pageSize,
event.pageIndex).subscribe(e=>{
this.dataSource.data = res;
});
return event;
}

你的 html 组件如下所示

 <mat-paginator (page)="handlePageEvent($event)"
[pageSizeOptions]="pageSizeOptions"
[pageSize]="pageSize"
class="sticky left-0"
[length]="length"
[pageIndex]="pageIndex"
aria-label="Select page"
></mat-paginator>

提交答案