Angular : Firestoreのデータをページネーションしたい② ~ Material2のPaginatorを使う
Angular : Firestoreのデータをページネーションしたい② ~ Material2のPaginatorを使う
前回:Angular : Firestoreのデータをページネーションしたい① ~ 超簡単なやり方
せっかくカッコいいMaterial2のPaginatorという部品があるので使ってみたい。正式マニュアルはこちら。Paginator
環境
Angular CLI: 7.1.4
Node: 10.15.3
OS: win32 x64
Angular: 7.1.4
"@angular/material": "^7.3.4"
app.module.ts
Material2を使用中ならいつもの通り。app.module.tsにMatPaginatorModuleを追記。
app.module.ts
import {MatPaginatorModule} from '@angular/material/paginator';
@NgModule({
//モジュール
imports: [
MatPaginatorModule,
]
Paginatorを張り付ける
まずはUIにMaterial2のPaginatorを張り付ける。上記環境にあるようにMaterial2は導入済みとする。HTMLは以下の通り。
<mat-paginator [length]="length"
[pageSize]="perPage"
[pageSizeOptions]="[10, 50, 100]"
(page)="getPaginatorData($event)"
>
</mat-paginator>
- [length]="length":全データ件数(上図ではデフォルトの100)
- [pageSize]="perPage":1ページあたりに表示する件数初期値(上図では10)
- [pageSizeOptions]="[10, 50, 100]":perPage数を選ぶセレクトボックス
- (page)="getPaginatorData($event)" :イベント発生時に発火させる関数
これでPaginator UIができた。したらそれぞれの変数をFirestoreからとってきたデータに紐づける。
Firestoreデータへの紐づけ
コントローラーに、①前回説明したsliceに使う各変数を設定して②MatPaginatorをオブジェクト化して③関数getPaginatorData($event)を書く。
import {MatPaginator} from '@angular/material';
// 各変数の宣言と初期値設定
length: number; //ページネーションで使う全書き込み件数
pageIndex: number = 0; //ページネーションで使うページインデックス
perPage: number = 50; //ページネーションで使うページ当たりのデータ数
lowValue: number = 0; //ページネーションのsliceで使うbegin値
highValue: number = 50; //ページネーションのsliceで使うbegin+perPage値
// MatPaginatorイベントをオブジェクト化
pageEvent: MatPaginator;
// イベント発火関数
public getPaginatorData(event) {
this.lowValue = event.pageIndex * event.pageSize;
this.highValue = this.lowValue + event.pageSize;
return event;
}
簡単な関数やのう。Thankyou avokado!!!!
いろいろググると、MatTableDataSourceをインポートして、dataSourceを作って… とあるけれど。
こんなように
dataSource : MatTableDataSource<Post>;
this.dataSource = new MatTableDataSource<Post>(response['results']);
これ要らないね。そういうやり方もあるということかな。
length(全データ件数)は?
最後にlength(全データ件数)をFirestoreから取ってきてlengthに格納するやり方。
// の全データ件数を獲得しlengthに保存
getDataSize() {
this.db.collection('commentsfaqs').valueChanges().subscribe( values => {
console.log('■データ数は、' + values.length);
this.length = values.length
})
}
これはローカルにロードしてカウントするやり方なので数百件程度の量なら有効とのこと。数千以上になるとFirebase Funcionを使うやり方のほうがいいらしい。getDataSize()はngOnInit(){...}に突っ込んで最初に実行させておく。
コンポーネントの全文は以下の通り(ページネーションに関係ないコードは割愛してる。うまく読み取っておくれ)
import {MatPaginator} from '@angular/material';
/* ページネーションに使用する変数と関数 */
length: number; //ページネーションで使う全書き込み件数
pageIndex: number = 0; //ページネーションで使うページインデックス初期値
perPage: number = 50; //ページネーションで使うページ当たりのデータ数初期値
lowValue: number = 0; //ページネーションのsliceで使うbegin値初期値
highValue: number = 50; //ページネーションのsliceで使うbegin+perPage値初期値
ngOnInit() {
this.getDataSize();
}
// MatPaginatorイベントをオブジェクト化
pageEvent: MatPaginator;
// の全データ件数を獲得しlengthに保存
getDataSize() {
this.db.collection('comments').valueChanges().subscribe( values => {
console.log('■データ数は、' + values.length);
this.length = values.length
})
}
// Paginatorからのイベント発火関数
public getPaginatorData(event) {
this.lowValue = event.pageIndex * event.pageSize;
this.highValue = this.lowValue + event.pageSize;
return event;
}
/* ページネーションに使用する変数と関数 ~ここまで */
HTMLのほう
<div style="display:inline-block; width: 100%" *ngFor="let post of posts | async | slice: lowValue : highValue">
<p>名前:{{ post.userName }}</p>
<p>メッセージ:{{ post.userName }}</p>
<p>投稿日時:{{ post.created }}</p>
</div>
(補足)日本語化
AngularやMaterial2のバージョンが違うが、AngularMaterialのPaginatorを日本語化する のとおりのやり方でうまくいった。
(補足)showFirstLastButtons
HTMLに以下のパラメータをつけると最初と最後のページに移動する矢印が追加できる。
[showFirstLastButtons]="true"
<mat-paginator [length]="length"
[pageSize]="perPage"
[pageSizeOptions]="[10, 50, 100]"
(page)="getPaginatorData($event)"
[showFirstLastButtons]="true"
>
Author And Source
この問題について(Angular : Firestoreのデータをページネーションしたい② ~ Material2のPaginatorを使う), 我々は、より多くの情報をここで見つけました https://qiita.com/atomyah/items/559298554179df83b05e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .