Angular でpipeの使い方
Angular にはpipeという機能があります。データをフォーマットするための仕組みです。
|
1 |
{{式 | パイプ名}} |
というように記述します。Angular には標準でいくつか標準で提供されているpipeがあります。
| pipe | 機能 |
|---|---|
| date | 日付を整形 |
| number | 数値を整形 |
| json | オブジェクトをJSON形式に変換 |
以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <p>{{dt | date:'yyyy/MM/dd'}}</p> <!-- mmではなくMMとする --> <p>{{num | number:'5.0-0'}}</p> <!-- 整数の最小桁数=5,小数は0-0とすると非表示 --> <p>{{num | number:'5.0-1'}}</p> <!-- 小数の最大桁数=1,丸められる --> <p>{{num | number:'5.3-5'}}</p> <!-- 小数の最小桁数=3,最大桁数=5 --> `, styleUrls: ['./app.component.css'] }) export class AppComponent { dt = new Date(); num = 10000000.06; } |
結果は以下のようになります。
|
1 2 3 4 5 6 7 |
2018/07/03 10,000,000 10,000,000.1 10,000,000.060 |
カスタムパイプ
独自のパイプを作成することができます。カスタムパイプを作成するには
|
1 |
ng generate pipe パイプ名 |
と実行します。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
