Wie wird der Paginator vom Material angular verwendet?

Question

Ich bin neu zu eckig und versuche, Seitenumbruch in meiner App zu implementieren. Ich versuche, diese Komponente unter

https://material.angular.io/components/paginator/overview

Mit dem Code zu verwenden, ich Länge bekommen, Seitengröße und pageSizeoptions in meiner .ts Datei

.html

<md-paginator [length]="length" 
       [pageSize]="pageSize" 
       [pageSizeOptions]="pageSizeOptions" 
</md-paginator> 

.ts

export class PaginatorConfigurableExample { 

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

    } 
} 

aber ich kann nicht scheinen, wie man eine Funktion auslöst, um das DA zu ändern ta auf dem Tisch oben, wenn die Seite geändert wird? Wie verwende ich die Methoden nextPage, previousPage, hasNextPage und hasPreviousPage?

Answer 1

Ich kämpfe mit dem gleichen hier. Aber ich kann dir zeigen, was ich recherchiere. Grundsätzlich Sie beginnen zunächst die Seite @Output Ereignis in den foo.template.ts Zugabe:

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

Und später haben Sie die pageEvent Attribut in den foo.component.ts hinzufügen Klasse und die anderen paginator Anforderungen zu handhaben:

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

und die Methode hinzufügen, die den Server Daten abzurufen:

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

Also, im Grunde jedes Mal, wenn Sie auf den Paginator klicken, aktivieren Sie getServerData (..) -Methode, die foo.service.ts ruft alle erforderlichen Daten abrufen. In diesem Fall müssen Sie nicht mit den Ereignissen nextPage und nextXXX umgehen, da dies beim Rendern der Ansicht automatisch berechnet wird.

Hoffe, das kann Ihnen helfen. Lass es mich wissen, wenn du Erfolg hast. =]