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

Question

我是 Angular 新手，正在尝试在我的应用中实现分页。我正在尝试使用this material component.

使用下面的代码，我可以在我的.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方法？

Answer 1

这对我有用：

确保在 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>

Answer 2

根据 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;
  }

}

Answer 3

我在这里也遇到了同样的问题。但我可以向你展示我所做的一些研究。 基本上，您首先开始在 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 事件，因为它们会在视图渲染时自动计算。

我希望这可以帮助你。让我知道你是否成功。 =]

Answer 4

这里的棘手部分是处理页面事件。 我们可以按照角度材料文档定义页面事件函数。

访问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}`);
  }

然后一切就绪，在我们的应用中启用分页。请随时提出相关问题谢谢。

Answer 5

花了几个小时后，这个问题得到了解决，我让它工作了。这被认为是用角材料解决分页的最简单方法。 - 首先从处理（component.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]
    })

希望它对你有用。

Answer 6

另一种使用 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;
 }

Answer 7

组件：

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>

Answer 8

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

检查一个工作示例here

您也可以查看 API 文档here

Answer 9

在花了几个小时之后，我认为这是应用分页的最佳方式。更重要的是它有效。 这是我的分页器代码 <mat-paginator #paginatoR [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">

在我的组件@ViewChild(MatPaginator) paginator: MatPaginator; 中查看子组件，最后您必须将分页器绑定到表数据源，这就是它的完成方式 ngAfterViewInit() {this.dataSource.paginator = this.paginator;} 容易吧？如果它对您有用，请将其标记为答案。

Answer 10

嘿，所以我偶然发现了这个并让它工作了，方法如下：

在我的 component.html

中

<mat-paginator #paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize"
    [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>

在我的 component.ts

中

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 并将其分配给 Material 表的 dataSource。