材料の角度からpaginatorを使用するには？

Question

私は角度があり、私のアプリでページネーションを実装しようとするのは初めてです。私は以下のコードでは、このコンポーネントに

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

を使用しようと、私は長さを得ることができ、ページサイズ、そして私の.TSでpageSizeoptionsは

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

.TS

の.htmlファイル

export class PaginatorConfigurableExample { 

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

    } 
} 

しかし、私はdaを変更する関数をトリガするようには思えませんページが変更されたときの上記の表には？また、nextPage、previousPage、hasNextPage、hasPreviousPageメソッドを使用するにはどうすればよいですか？

Answer 1

私はここで同じことに苦労しています。しかし、私はいくつかの研究をしていることをあなたに示すことができます。 foo.component.tsにpageEvent属性を追加する

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

以降、あなたは持っているが： は基本的には、最初にfoo.template.tsでページ@outputイベントの追加を開始します

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

基本的に、ページャーをクリックするたびに、foo.service.tsが必要なすべてのデータを取得するgetServerData（..）メソッドがアクティブになります。この場合、次のページとnextXXXのイベントは、ビューレンダリング時に自動的に計算されるため、処理する必要はありません。

希望すると、これが役立ちます。あなたが成功したかどうか教えてください。 =]