Angular TIPS

Angular TIPS

数値(単数/複数)によって表示を切り替えるには?(i18nPlural)

2017年8月30日

Angularで数値によってテキスト表示内容を切り替えるための、i18nPluralパイプの基本的な使い方を説明する。

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

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

 i18nPluralパイプを利用することで、変数の値――単数複数のいずれであるか、3以上であるか、などによって、表現を切り替えることができます。例えばメールボックスなどのアプリを想定してみましょう。新着メールの件数に応じて、以下のようなメッセージを表示させるものとします。

件数 メッセージ
0 新着メッセージはありません。
1 メッセージがあります。
2以上 ●○件のメッセージがあります。
新着メッセージの件数によって変化するメッセージ

 このような表現の差し替えは、以下のようなコードで実装できます。

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<div>{{ mails.length |i18nPlural: labels }}</div>`
})
export class AppComponent {
  // 表示すべきメッセージ
  labels = {
    '=0'   : '新着メッセージはありません。',
    '=1'   : 'メッセージがあります。',
    'other': '#件のメッセージがあります。',
  }

  // 新着メール情報
  mails = [
    { name: '山田太郎', body: 'こんにちは。今年は暑いねー。' },
    { name: '鈴木久美子', body: 'お久しぶりです。元気にしてますか?' },
    { name: '佐藤雄二', body: '今度の日曜日、ランチしに行きませんか。' },
    { name: '山口夕夏', body: 'お誕生日おめでとう!' },
    { name: '田中仁', body: 'いつもお世話になっております。明日はよろしくお願い致します。' }
  ];
}
変数の値によって表現を切り替えるためのコード
mails配列を0件にした場合

mails配列を0件にした場合

mails配列を1件にした場合

mails配列を1件にした場合

mails配列を5件にした場合

mails配列を5件にした場合

メールの件数(mails.length)によってメッセージが変化*1
  • *1 メッセージの変化を確認するには、mailsプロパティ(配列)に含まれる要素の個数を変化させてみましょう。

 i18nPluralパイプの構文は、以下の通りです。

[構文]i18nPluralパイプ

value | i18nPlural : map

  • value: 任意の数値
  • map: 件数に応じたメッセージのセット

 引数mapは、'=数値': 'メッセージ'のハッシュ形式で、数値と対応するメッセージを用意します。ここでは=0=101の場合のメッセージを定義していますが、同じく2以上に対応するメッセージを定義することも可能です。otherは「その他」で明示的に宣言されていない値に対応するメッセージを定義します。一般的には、=0=1otherのセットで利用することが多いでしょう。

 メッセージには「#」で元の数値を埋め込むこともできます。

処理対象:PIPE(パイプ) カテゴリ:基本
API:I18nPluralPipe(i18nPlural) カテゴリ:@angular > common > PIPE(パイプ)

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

19. イベントハンドラーでイベント情報を参照するには?($event)

要素にイベントハンドラーをバインドするEvent Bindingで、その引数で得られるイベントオブジェクト「$event」から、イベントに関する詳細情報を取得する方法を説明する。

20. フォームへの入力値をイベントハンドラーで受け取るには?(テンプレート参照変数)

フォーム要素への入力値をイベントとして受け取る方法として、テンプレート参照変数を利用する方法を説明する。

21. 【現在、表示中】≫ 数値(単数/複数)によって表示を切り替えるには?(i18nPlural)

Angularで数値によってテキスト表示内容を切り替えるための、i18nPluralパイプの基本的な使い方を説明する。

22. 数値をパーセント形式に整形するには?(percent)

Angularで数値を%(パーセント)形式のテキスト表示に整形するための、percentパイプの基本的な使い方を説明する。

23. 数値を通貨記号付きの値に整形するには?(currency)

Angularで数値を通貨記号付きのテキスト表示に整形するための、currencyパイプの基本的な使い方を説明する。

サイトからのお知らせ

Twitterでつぶやこう!