Как использовать paginator из материала angular?

Ответ 1

Я борюсь с тем же здесь. Но я могу показать вам, что у меня есть некоторые исследования. По сути, вы сначала начинаете добавлять событие страницы @Output в foo.template.ts:

 <md-paginator #paginator
                [length]="length"
                [pageIndex]="pageIndex"
                [pageSize]="pageSize"
                [pageSizeOptions]="[5, 10, 25, 100]"
                (page)="pageEvent = getServerData($event)"
                >
 </md-paginator>

И позже вы должны добавить атрибут pageEvent в класс 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 для получения всех необходимых данных. В этом случае вам не нужно обрабатывать события nextPage и nextXXX, поскольку они будут автоматически рассчитываться при рендеринге представления.

Надеюсь, это поможет вам. Дайте мне знать, если у вас был успех. знак равно

Ответ 2

Эй, я наткнулся на это и получил его работать, вот как:

внутри моего 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. Этот метод dataSource skip и take и назначает его dataSource для таблицы Материал.

Ответ 3

Другой способ связать Angular Paginator с таблицей данных с помощью Slice Pipe. Здесь данные выбираются только один раз с сервера.

Посмотреть:

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

Ответ 4

Проблема в исходном вопросе заключается в том, что вы не захватываете событие "page", для решения которого вам необходимо добавить (page)='yourEventHandler($event) ' в качестве атрибута в теге md-paginator.

проверьте рабочий пример здесь

Вы также можете проверить API документы здесь

Ответ 5

Составная часть:

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>

Ответ 6

Потратив несколько часов на это, я думаю, что это лучший способ применить нумерацию страниц. И что еще более важно это работает. Это мой код для разбивки на страницы <mat-paginator #paginatoR [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">

Внутри моего компонента @ViewChild(MatPaginator) paginator: MatPaginator; чтобы просмотреть дочерний процесс и, наконец, вы должны привязать paginator к таблице dataSource, и вот как это делается ngAfterViewInit() {this.dataSource.paginator = this.paginator;} Легко ли? если это работает для вас, пометьте это как ответ.

Ответ 7

В большинстве случаев вы не хотите использовать событие страницы. Пока вы предоставляете таблицу данных с источником данных, который имеет методы Connect и Disconnect, paginator позаботится об "обновлении" этого источника данных, который, в свою очередь, обновит таблицу.

Обязательно стоит прочитать эту статью для разбивки на страницы на стороне сервера и т. Д.: Таблица данных угловых материалов: полный пример

Ответ 8

Эта проблема решена после нескольких часов, и я получил его на работу. Это самый простой способ решить нумерацию страниц с помощью углового материала. - Сначала запустите, работая над файлом (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 (module.ts).

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

   @NgModule({
      imports: [MatPaginatorModule]
    })

Надеюсь, это сработает для вас.

Ответ 9

основываясь на ответе Уэсли Кутзи, я написал это. Надеюсь, что это может помочь любому найти этот вопрос. У меня были ошибки с заменой размера страницы в середине списка, поэтому я отправляю свой ответ:

Paginator HTML и список

<mat-paginator [length]="localNewspapers.length" pageSize="{{highValue}}"
               (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;

  {...} // not relevant logic

  // used to build an array 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;
  }

}