我是角度新手，并尝试在我的应用程序中实现分页。我正在尝试使用此材料组件。
使用下面的代码，我可以在我的.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方法？
我在这里挣扎着。但我可以向你展示我所做的一些研究。 基本上，您首先开始在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;
}
所以，基本上，每次你点击分页器时，你都会激活getServerData(..)方法，该方法将调用foo.service.ts获取所需的所有数据。在这种情况下，您不需要处理nextPage和nextXXX事件，因为它们将在视图呈现时自动计算。
我希望这能帮助你。让我知道你是否成功了。=]
嘿，所以我偶然发现了这个并让它工作，方法如下：
在我的组件内.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。
基于Wesley Coetzee的回答，我写了这篇文章。希望它可以帮助任何谷歌搜索这个问题的人。我在交换列表中间的分页器大小时遇到了错误，这就是我提交答案的原因：
分页器 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;
}
}
另一种使用 Slice Pipe 将 Angular 分页器与数据表链接的方法。
视图：
<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)
);
}
.HTML
<mat-paginator
[length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
[showFirstLastButtons]="true">
</mat-paginator>
原始问题中的问题是您没有捕获"page"事件，要解决此问题，您需要在 md-paginator 标签中添加(page)='yourEventHandler($event)' 作为属性。
在此处查看工作示例
您还可以在此处查看 API 文档
在花了几个小时之后，我认为这是应用分页的最佳方式。更重要的是，它有效。 这是我的分页码<mat-paginator #paginatoR [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">
在我的组件中@ViewChild(MatPaginator) paginator: MatPaginator;查看子项，最后您必须将分页器绑定到表数据源，这就是完成方式ngAfterViewInit() {this.dataSource.paginator = this.paginator;}容易吧？如果它适合您，请将其标记为答案。
这个问题在花了几个小时后得到解决，我让它工作了。 这被认为是使用角度材料解决分页的最简单方法。 - 首先从处理(组件.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]
})
希望它能为你工作。
这里棘手的部分是处理页面事件。 我们可以遵循角度材料文档，直到定义页面事件功能。
访问 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>
我浏览了答案，虽然有一些很好的工具，但我认为有更干净(更 ng 式)的方法......
在 HTML 中，我们希望将#paginator添加为选择器，以便在绑定时使用，例如@ViewChild(MatPaginator) paginator!: MatPaginator;
<mat-paginator #paginator
[pageSizeOptions]="[5, 10, 20]"
showFirstLastButtons
aria-label="Select page of periodic elements">
</mat-paginator>
在相对代码中，将分页器分配给this.dataSource.paginator，并订阅名为page的可观察属性。
// bind to paginator control
@ViewChild(MatPaginator) paginator!: MatPaginator;
// subscribe to paginator events via observable page property
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.paginator.page.subscribe(page => {
this.searchItems();
});
}
注意：searchItems利用paginator来请求数字所以项目和特定页面，并且当没有args搜索时没有过滤器。
调用方法提取项目(从 API 或其他源)并填充表表。
注意：在实际场景中，我们希望通过状态操作来完成所有这些操作。
代码处于 https://github.com/abcox/toybox-web-ng2/tree/main/src/app/contact/contact-list