Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Angular TIPS

Angular TIPS

ページング処理を実装するには?(ngFor/slice)

2018年3月1日

ngForディレクティブとsliceパイプを使って、ページャー(=ページングのためのリンクリスト)を実装する方法を説明する。

  • このエントリーをはてなブックマークに追加

【対応バージョン】 Angular 5以降。v5時点で執筆しました。

 ngForディレクティブsliceパイプを組み合わせることで、ページング処理もカンタンに実装できます。

 例えば以下は、あらかじめ用意された記事情報を3件ごとにページで区切る例です。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <table class="table">
     <tr>
     <th>タイトル</th><th>著者</th><th>公開日</th>
      </tr>
      <!-- 1sliceパイプを準備-->
      <tr *ngFor="let article of articles | slice: begin: begin+length">
      <td><a href="{{article.url}}">{{article.title}}</a></td>
      <td>{{article.author}}</td>
      <td>{{article.released | date: 'mediumDate'}}</td>
    </tr>
    </table>
      <!-- 4ページャーを表示 -->
      <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>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 2表示開始位置/最大件数を設定
  begin= 0;
  length = 3;

  articles = [
    {
      url: 'https://www.buildinsider.net/web/jqueryref',
      title: 'jQuery逆引きリファレンス',
      author: 'WINGSプロジェクト',
      released: new Date(2017, 10, 1)
    },
    ……中略……
  ];

  // 3ページャークリック時の処理
  pager(page: number) {
    this.begin = this.length * page;
  }
}
記事情報をページング表示するコード(app.component.ts)

さらに、Bootstrap(後述の[Note]を参照)のスタイルシートをインポートするために、index.htmlファイルに<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">のような記述が必要になる。

3件ごとにページングされた。1ページ目
3件ごとにページングされた。2ページ目
3件ごとにページングされた

 ページャー(=ページングのためのリンクリスト)を実装するにはまず、「begin件目からbeginlength件のデータを抜き出す」ためのsliceパイプを準備します(1)。beginの初期値は0(先頭)、lengthはこの例であれば3です(2)。lengthの値は、ページサイズに応じて変更しても構いません。

 あとは、ページャークリック時(3)に、begin(開始位置)の値を変えていくだけです。開始位置は「ページサイズ(length)×ページ数」で求められます。

[Note]

 4<ul class="pagination"><a class="page-link"~>は、Bootstrapで定義されたスタイルクラスです。Bootstrapを利用することで、こうしたページャーを手軽に実装できます。

処理対象:ディレクティブ(Directive) カテゴリ:基本
API:NgForOf(*ngFor) カテゴリ:@angular > common > DIRECTIVE(ディレクティブ)
処理対象:PIPE(パイプ) カテゴリ:基本
API:SlicePipe(slice) カテゴリ:@angular > common > PIPE(パイプ)

※以下では、本稿の前後を合わせて5回分(第41回~第45回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

Angular TIPS
41. コンポーネント要素に属性/イベントをバインドするには?(hostパラメーター)

@Componentデコレーターのhostパラメーターを使って、コンポーネント要素そのものに属性やイベントをバインドする方法を説明する。

Angular TIPS
42. 文字列によって表示を切り替えるには?(i18nSelect)

i18nSelectパイプを使って、文字列値によってテキスト表示内容を切り替える方法を説明する。

Angular TIPS
43. 【現在、表示中】≫ ページング処理を実装するには?(ngFor/slice)

ngForディレクティブとsliceパイプを使って、ページャー(=ページングのためのリンクリスト)を実装する方法を説明する。

Angular TIPS
44. 式の値によってメッセージを切り替えるには?(ngSwitch)

JavaScriptのswitch文のように、ある式を評価して、その式の値に応じて、表示するメッセージを切り替える方法を説明する。

Angular TIPS
45. 自作のサービスを定義するには?(@Injectableデコレーター)

既存のコンポーネントからアプリ固有のロジックをサービスとして切り出すための基本的な方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!