#Angular : Firestoreのデータをページネーションしたい① ~ 超簡単なやり方
###環境
Angular CLI: 7.1.4
Node: 10.15.3
OS: win32 x64
Angular: 7.1.4
"@angular/material": "^7.3.4"
###前提
Firestoreからとってきたデータを以下のようにngFor文でづらづらっと並べていくHTMLがあったとする。
<div style="display:inline-block; width: 100%" *ngFor="let post of posts | async">
<p>名前:{{ post.userName }}</p>
<p>メッセージ:{{ post.userName }}</p>
<p>投稿日時:{{ post.created }}</p>
</div>
###ページネーションのやり方
なんと*ngFor文のうしろにパイプをかまして"slice: [ページインデックス番号] : [1ページ当たりのデータ件数]" を追記するだけ!
例:
<div style="display:inline-block; width: 100%" *ngFor="let post of posts | async | slice: 0:10">
これで1ページあたり10件表示するページネーションができる。
###ページャーの作り方
あとは[ページインデックス番号]と[1ページ当たりのデータ件数]に渡す数値は変数にして関数を使って制御すればいい。HTMLにはページャー(クリックするとこ)を作成して、
<ul class="pagination">
<li><a class="page-link" href="#" (click)="pager(0)">1</a></li>
<li><a class="page-link" href="#" (click)="pager(1)">2</a></li>
<li><a class="page-link" href="#" (click)="pager(2)">3</a></li>
</ul>
コンポーネントのほうに、関数を作る。
begin= 0; //[ページインデックス番号]
length = 10; // [1ページ当たりのデータ件数]
pager(page: number) {
this.begin = this.length * page;
}
こんな風になるみたい。
ページャーがかっこいいのはBootstrapのスタイルシートをインポートしているようだ。
###結論
これだとデータ数が増えていったら手作業でページャーボタンを増やしていかなければならない。でも簡単ねー
参考:Angularで「ページング」処理を実装するには?(ngFor/slice)