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>

이것으로 이런 UI가 된다.

[length]="length": 전체 데이터 개수(위 그림에서 기본값 100)

[pageSize]="perPage": 페이지당 표시할 건수 초기값(위 그림에서는 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"
>

참조 : How to use paginator from material angular?