🐟
[Angular] パイプ基礎
パイプとは
テンプレート上に埋め込まれたデータを加工/ 整形するための仕組みです｡
文字列、通貨金額、日付や、その他の表示データを書式設定するのに適しています。 Angularは複数のビルトインパイプを備えており、独自のパイプを作ることもできます。
補完バインディング{{}}の中で使われています。
テンプレートでプロパティなどを展開するときに使えます。
例えばhelloをHELLOと大文字にしたいときは、、
{{ "hello" | uppercase }}
など。
{{ 整形対象 | パイプ :'パラメータ'}}
|を連ねることで一つの整形対象に対して複数のパイプを適用できます｡
ビルドインパイプ
Angularが用意してくれている、パイプです｡
| パイプ名 | 説明 |
|---|---|
| lowercase | 大文字から小文字に変換 |
| uppercase | 小文字から大文字に変換 |
| titlecase | 単語の先頭文字を大文字に変換 |
| slice | 文字列から部分文字列を切り出し |
| date | 日付/時刻を整形 |
| number | 数値を桁区切り文字で整形 |
| percent | 数値を%形式に整形 |
| json | オブジェクトをJSON形式に変換 |
| i18nPlural | 数値によって表示文字列を変化 |
| i18nSelect | 文字列に応じて出力を切り替え |
| async | Observable/Promiseによる非同期処理の結果を取得 |
lowercase
テキストをすべて小文字に変換します。
{{ value_expression | lowercase }}
const str = 'STRING';
----------------------
<p>{{ str | lowercase }}</p>
// 'string'
uppercase
テキストをすべて大文字に変換します。
{{ value_expression | uppercase }}
const str = 'string';
----------------------
<p>{{ str | uppercase}}</p>
// 'STRING'
titlecase
テキストをタイトルケースに変換します。
各単語の最初の文字を大文字にし、残りを小文字に変換します。
単語は、スペース、タブ、改行文字などの任意の空白文字で区切られます。
{{ value_expression | titlecase }}
<p>{{'some string' | titlecase}}</p>
// Some String
slice
文字列や配列から部分文字列を切り出せます｡
str | slice: start[: end]
引数のendを省略した場合は､start時点から末尾までが切り出し対象になります｡
startは取得開始位置
endは取得終了位置
💡 先頭(start)からのカウントは0番目から｡
末尾(end)からのカウントは-1番目から｡
例) str = ‘あいうえお’
str = 'あいうえお';
{{str | slice: 2 }}; // うえお
{{str | slice: 2 : 4}}; // うえ
{{str | slice: -3}}; // うえお
{{str | slice: -3 : -2}}; // う
date
日付の値を変換します。
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
now = new Date();
-------------------------------
<p>{{ now | date:"yy/MM/dd HH:mm" }}</p>
// 22/07/22 07:45
{{ dateObj | date }} // 'Jun 15, 2015'
{{ dateObj | date:'medium' }} // 'Jun 15, 2015, 9:43:11 PM'
{{ dateObj | date:'shortTime' }} // '9:43 PM'
{{ dateObj | date:'mm:ss' }} // '43:11'
あらかじめ設定されているフォーマットオプション
| オプション | 該当する意味 | 値例 |
|---|---|---|
| 'short' | 'M/d/yy, h:mm a' | 6/15/15, 9:03 AM |
| 'medium' | 'MMM d, y, h:mm:ss a' | Jun 15, 2015, 9:03:01 AM |
| 'long' | 'MMMM d, y, h:mm:ss a z' | June 15, 2015 at 9:03:01 AM GMT+1 |
| 'full' | 'EEEE, MMMM d, y, h:mm:ss a zzzz' | Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 |
| 'shortDate' | 'M/d/yy' | 6/15/15 |
| 'mediumDate' | 'MMM d, y' | 42170 |
| 'longDate' | 'MMMM d, y' | 42170 |
| 'fullDate' | 'EEEE, MMMM d, y' | Monday, June 15, 2015 |
| 'shortTime' | 'h:mm a' | 0.377083333 |
| 'mediumTime' | 'h:mm:ss a' | 0.377094907 |
| 'longTime' | 'h:mm:ss a z' | 9:03:01 AM GMT+1 |
| 'fullTime' | 'h:mm:ss a zzzz' | 9:03:01 AM GMT+01:00 |
カスタムフォーマットオプション
| フィールドタイプ | フォーマット | 説明 | 値例 |
|---|---|---|---|
| Era | G, GG & GGG | Abbreviated | AD |
| GGGG | Wide | Anno Domini | |
| GGGGG | Narrow | A | |
| Year | y | Numeric: minimum digits | 2, 20, 201, 2017, 20173 |
| yy | Numeric: 2 digits + zero padded | 02, 20, 01, 17, 73 | |
| yyy | Numeric: 3 digits + zero padded | 002, 020, 201, 2017, 20173 | |
| yyyy | Numeric: 4 digits or more + zero padded | 0002, 0020, 0201, 2017, 20173 | |
| Week-numbering year | Y | Numeric: minimum digits | 2, 20, 201, 2017, 20173 |
| YY | Numeric: 2 digits + zero padded | 02, 20, 01, 17, 73 | |
| YYY | Numeric: 3 digits + zero padded | 002, 020, 201, 2017, 20173 | |
| YYYY | Numeric: 4 digits or more + zero padded | 0002, 0020, 0201, 2017, 20173 | |
| Month | M | Numeric: 1 digit | 9, 12 |
| MM | Numeric: 2 digits + zero padded | 09, 12 | |
| MMM | Abbreviated | Sep | |
| MMMM | Wide | September | |
| MMMMM | Narrow | S | |
| Month standalone | L | Numeric: 1 digit | 9, 12 |
| LL | Numeric: 2 digits + zero padded | 09, 12 | |
| LLL | Abbreviated | Sep | |
| LLLL | Wide | September | |
| LLLLL | Narrow | S | |
| Week of year | w | Numeric: minimum digits | 1... 53 |
| ww | Numeric: 2 digits + zero padded | 01... 53 | |
| Week of month | W | Numeric: 1 digit | 1... 5 |
| Day of month | d | Numeric: minimum digits | 1 |
| dd | Numeric: 2 digits + zero padded | 1 | |
| Week day | E, EE & EEE | Abbreviated | Tue |
| EEEE | Wide | Tuesday | |
| EEEEE | Narrow | T | |
| EEEEEE | Short | Tu | |
| Week day standalone | c, cc | Numeric: 1 digit | 2 |
| ccc | Abbreviated | Tue | |
| cccc | Wide | Tuesday | |
| ccccc | Narrow | T | |
| cccccc | Short | Tu | |
| Period | a, aa & aaa | Abbreviated | am/pm or AM/PM |
| aaaa | Wide (fallback to a when missing) | ante meridiem/post meridiem | |
| aaaaa | Narrow | a/p | |
| Period* | B, BB & BBB | Abbreviated | mid. |
| BBBB | Wide | am, pm, midnight, noon, morning, afternoon, evening, night | |
| BBBBB | Narrow | md | |
| Period standalone* | b, bb & bbb | Abbreviated | mid. |
| bbbb | Wide | am, pm, midnight, noon, morning, afternoon, evening, night | |
| bbbbb | Narrow | md | |
| Hour 1-12 | h | Numeric: minimum digits | 1, 12 |
| hh | Numeric: 2 digits + zero padded | 01, 12 | |
| Hour 0-23 | H | Numeric: minimum digits | 0, 23 |
| HH | Numeric: 2 digits + zero padded | 00, 23 | |
| Minute | m | Numeric: minimum digits | 8, 59 |
| mm | Numeric: 2 digits + zero padded | 08, 59 | |
| Second | s | Numeric: minimum digits | 0... 59 |
| ss | Numeric: 2 digits + zero padded | 00... 59 | |
| Fractional seconds | S | Numeric: 1 digit | 0... 9 |
| SS | Numeric: 2 digits + zero padded | 00... 99 | |
| SSS | Numeric: 3 digits + zero padded (= milliseconds) | 000... 999 | |
| Zone | z, zz & zzz | Short specific non location format (fallback to O) | GMT-8 |
| zzzz | Long specific non location format (fallback to OOOO) | GMT-08:00 | |
| Z, ZZ & ZZZ | ISO8601 basic format | -800 | |
| ZZZZ | Long localized GMT format | GMT-8:00 | |
| ZZZZZ | ISO8601 extended format + Z indicator for offset 0 (= XXXXX) | -08:00 | |
| O, OO & OOO | Short localized GMT format | GMT-8 | |
| OOOO | Long localized GMT format | GMT-08:00 |
number (Decimal)
数字オプションとロケール規則に従って値をフォーマットする。ロケールは、グループの大きさや区切り、小数点以下の文字、その他ロケール特有の設定を決定する。
{{ value_expression | number [ : digitsInfo [ : locale ] ] }}
pi: number = 3.14159265359;
------------------------
<p>
フォーマットなし:
{{pi | number}}
<!--output: '3.142'-->
</p>
<p>
digitsInfo パラメータを指定した場合:
{{pi | number:'4.1-5'}}
<!--output: '0,003.14159'-->
</p>
数字情報
値の10進数表現はdigitsInfoパラメータで指定し、以下のフォーマットで記述する。
minIntegerDigits.minFractionDigits-maxFractionDigits
-
minIntegerDigits: 小数点の前の整数の最小桁数。デフォルトは1。 -
minFractionDigits: 小数点以下の最小桁数を指定します。デフォルトは0。 -
maxFractionDigits: 小数点以下の最大桁数。デフォルトは3。
percent
数値からパーセント文字列に変換し、グループのサイズや区切り、小数点以下の文字、その他のロケール特有の設定を決定するロケール規則に従ってフォーマットする。
{{ value_expression | percent [ : digitsInfo [ : locale ] ] }}
a: number = 0.259;
b: number = 1.3495;
-----------------------------
<div>
<!--output '26%'-->
<p>A: {{a | percent}}</p>
<!--output '0,134.950%'-->
<p>B: {{b | percent:'4.3-5'}}</p>
</div>
json
値をJSON形式の表現に変換する。デバッグに便利。
{{ value_expression | json }}
object: Object = {foo: 'bar', baz: 'qux',
nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};
---------------------------------------------------------
<div>
<p>Without JSON pipe:</p>
<pre>{{object}}</pre>
<p>With JSON pipe:</p>
<pre>{{object | json}}</pre>
</div>
// {
// "foo": "bar",
// "baz": "qux",
// "nested": {
// "xyz": 3,
// "numbers": [
// 1,
// 2,
// 3,
// 4,
// 5
// ]
// }
// }
i18nPlural
値をロケール規則に従って複数化した文字列にマップする。
{{ value_expression | i18nPlural : pluralMap [ : locale ] }}
messages: any[] = ['Message 1'];
messageMapping: {[ k: string]: string } =
{ '=0': 'No messages.', '=1': 'One message.', 'other': '# messages.' };
--------------------------------------------------------------------------
<div>{{ messages.length | i18nPlural: messageMapping }}</div>
// One message.
-
pluralMap: ICUのフォーマットを模倣したオブジェクトで、http://userguide.icu-project.org/formatparse/messages を参照してください。
i18nSelect
現在の値にマッチする文字列を表示する汎用セレクタ。
{{ value_expression | i18nSelect : mapping }}{{ value_expression | i18nSelect : mapping }}
gender: string = 'male';
inviteMap: any =
{'male': 'Invite him.', 'female': 'Invite her.', 'other': 'Invite them.'};
------------------------------------------------------------------------------
<div>{{gender | i18nSelect: inviteMap}} </div>
// Invite him.
-
mapping: 提供された値の異なる値に対して表示されるべきテキストを示すオブジェクト。
async
async pipeはpromiseやobservableな非同期オブジェクトをそのままtemplateで表示できるようにしたpipeです。
asyncパイプを利用するとビュー側でObservableオブジェクトを受け取り、それらが値を返したタイミングでその値を取り出すことができます。
{{ obj_expression | async }}
下記はngFor文です。
<li *ngFor="let hero of heroes$ | async" >
<a routerLink="/detail/{{hero.id}}">
{{hero.name}}
</a>
</li>
または
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Component({
selector: 'my-app',
template: `
<div>
サーバーからのメッセージ：{{message | async}}
</div>
`
})
export class AppComponent {
message: Observable<string>;
constructor(private http: Http) { }
ngOnInit() {
this.message = this.http.get('app/message.txt')
.map(response => response.text());
}
}
- messageパラメータはObservable型です。
- 受け取ったObservable型の値をそのままテンプレートに出すにはasyncパイプを使うということです。
async as
ngIf文ではasを使うと評価結果を変数化できます。
下記の場合、user$の値をuserに入れなさいという意味
asによって作られた変数はngifのディレクティブ配下のみで参照できます。
<div *ngIf="user$ | async as user">
<p>{{ user.name }}</p>
<p>{{ user.age }}</p>
<img [src]="user.icon">
</div>
-
user$をuserにしてテンプレートで変数として使う
カスタムパイプ
パイプを自作することができます。
カスタムパイプでフォーマットの共通化
先ほど作成した日付のフォーマットを共通化します。
まずはカスタムパイプを定義するファイルを作成します。
ng g pipe pipes/comment-date
src\app\pipes\comment-date.pipe.ts
import { formatDate } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
// パイプの名前
name: 'commentDate'
})
export class CommentDatePipe implements PipeTransform {
// メインメソッド
transform(value: number, ...args: string[]): string {
const format = args[0] || 'yyyy年MM月dd日 HH:mm';
return formatDate(value, format, 'en-US');
}
}
- テンプレートでパイプを記述するときに
commentDateとすることで呼び出せます。 -
transformメソッドがこのパイプを呼び出したときのメインメソッドとなります。 -
formatDateをインポートすることでformatDateメソッドが使えます。 - パイプで
commentDateのみ記述した場合は'yyyy年MM月dd日 HH:mm'が適応されます。もし任意の文字列でフォーマットを指定した場合は、args配列で受け取り、それが適応されます。
テンプレート
class="media-date">{{ comment.date | commentDate }}
-------------------------------------------------------
class="media-date">{{ comment.date | commentDate: 'MM月dd日' }} のようにカスタムも可能
参考
Discussion