私はangularに慣れていないので、自分のアプリにページネーションを実装しようとしています。この素材成分を使おうとしています。
以下のコードでは、私が得ることができるlength、pagesizeとpageSizeOptions私の中.tsのファイル
<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方法を？
私は同じことをここで苦労しています。しかし、私がいくつかの研究を行っていることをお見せできます。基本的に、あなたは最初にイベント@outputページの追加を開始foo.template.ts：
<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;
}
したがって、基本的には、ページネーターをクリックするたびに、foo.service.tsを呼び出して必要なすべてのデータを取得するgetServerData（..）メソッドをアクティブにします。この場合、nextPageおよびnextXXXイベントはビューのレンダリング時に自動的に計算されるため、処理する必要はありません。
これがお役に立てば幸いです。成功したかどうか教えてください。=]
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加