wake-up-neo.net

Wie verwende ich die Paginierung aus Materialwinkel?

Ich bin Neuling und versuche, die Paginierung in meiner App zu implementieren. Ich versuche, diese Materialkomponente zu verwenden.

Mit dem folgenden Code kann ich length, pagesize und pageSizeOptions in meiner .ts-Datei abrufen

<md-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
</md-paginator>
export class PaginatorConfigurableExample {

  length = 100;
  pageSize = 10;
  pageSizeOptions = [5, 10, 25, 100];

  }
}

ich kann jedoch anscheinend keine Funktion auslösen, um die Daten in der obigen Tabelle zu ändern, wenn die Seite geändert wird. Wie verwende ich auch die Methoden nextPage, previousPage, hasNextPage und hasPreviousPage?

16
HeisenBerg

Ich kämpfe hier mit dem Gleichen. Aber ich kann Ihnen zeigen, was ich recherchiert habe ... Im Grunde fangen Sie zuerst an, die Seite @Output-Ereignis in der Datei foo.template.ts hinzuzufügen:

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

Später müssen Sie das pageEvent -Attribut in der foo.component.ts -Klasse und den anderen hinzufügen, um die Paginator-Anforderungen zu erfüllen:

pageEvent: PageEvent;
datasource: null;
pageIndex:number;
pageSize:number;
length:number;

Fügen Sie die Methode hinzu, die die Serverdaten abruft:

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

Im Grunde aktivieren Sie jedes Mal, wenn Sie auf den Paginator klicken, die Methode getServerData (..), die foo.service.ts aufruft, um alle erforderlichen Daten zu erhalten. In diesem Fall müssen Sie die Ereignisse nextPage und nextXXX nicht behandeln, da diese beim Rendern der Ansicht automatisch berechnet werden.

Hoffe das kann dir helfen. Lassen Sie mich wissen, ob Sie Erfolg hatten. =]

25
aelkz

Hey also bin ich darauf gestoßen und habe es funktioniert, hier ist wie:

in meiner component.html

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

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

Die gesamte Paging-Arbeit wird in der iterator-Methode ausgeführt. Diese Methode ermittelt die Variablen skip und take und weist diese der Variablen dataSource für die Tabelle Material zu.

7
Wesley Coetzee

Eine andere Möglichkeit, Angular Paginator mit der Datentabelle mithilfe von Slice Pipe zu verknüpfen. Die Daten werden nur einmal vom Server abgerufen.

Aussicht:

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

Komponente

    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;
 }
5
Asridh Kumar

Das Problem der ursprünglichen Frage ist, dass Sie kein "page" -Ereignis erfassen. Um dieses Problem zu beheben, müssen Sie (page)='yourEventHandler($event) 'als Attribut im md-paginator-Tag hinzufügen.

überprüfe ein Arbeitsbeispiel hier

Sie können auch die API-Dokumente überprüfen hier

2
LH7

Dieses Problem ist nach ein paar Stunden behoben und ich habe es funktioniert. Dies ist vermutlich der einfachste Weg, um die Paginierung mit angular Material) zu lösen. - Beginnen Sie zunächst mit der Bearbeitung der Datei (component.html)

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

und in der Datei (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 => {});

     }

 }

Denken Sie daran Das Paginierungsmodul muss in die aktuell arbeitende Moduldatei (module.ts) importiert werden.

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

   @NgModule({
      imports: [MatPaginatorModule]
    })

Hoffe, es wird für Sie arbeiten.

1
gunjan girdhar

basierend auf der antwort von wesley coetzee habe ich das geschrieben. Hoffe, es kann jedem helfen, dieses Problem zu googeln. Ich hatte Fehler beim Vertauschen der Paginatorgröße in der Mitte der Liste, deshalb sende ich meine Antwort:

Paginator HTML und Liste

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

Komponentenlogik

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

}
1
avokado

Komponente:

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>
0
Viree

Nachdem ich ein paar Stunden damit verbracht habe, denke ich, dass dies der beste Weg ist, um Paginierung anzuwenden. Und was noch wichtiger ist, es funktioniert. Dies ist mein Paginator-Code <mat-paginator #paginatoR [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">

In meiner Komponente @ViewChild(MatPaginator) paginator: MatPaginator;, um child anzuzeigen, und schließlich müssen Sie Paginator an table dataSource binden, und so wird es gemacht ngAfterViewInit() {this.dataSource.paginator = this.paginator;} Easy right? Wenn es für Sie funktioniert, markieren Sie dies als Antwort.

0
Chetan Sharma