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건 표시하는 페이지네이션을 할 수 있다.

페이저를 만드는 방법

그리고는 [페이지 인덱스 번호]와 [페이지당 데이터 건수]에 건네주는 수치는 변수로 해 함수를 사용해 제어하면 된다. 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)