基本說明

pipe 基本上就是值的轉換

下圖是在官網查詢 pipe 的所有項目https://angular.io/api?type=pipe

CurrencyPipe (貨幣)

{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}
currencyCode：
官方 ISO 4217 貨幣名稱的主要代碼：https://en.wikipedia.org/wiki/ISO_4217

display(中文：顯示狀態)：
五種方式

• 'code' ：顯示主要代碼
• 'symbol' ：顯示符號 $ (預設)
• 'symbol-narrow' ：有兩種貨幣符號的要使用這種，才會顯示簡化符號
• string ：使用字串代表顯示
• boolean：Angular 第五版 棄用

locale：
各國代碼：https://zh.wikipedia.org/wiki/%E5%8C%BA%E5%9F%9F%E8%AE%BE%E7%BD%AE

component.ts
-----
b: number = 1.3495;

component.html
-----
<p>TWD-symbol: {{b | currency:'TWD':'symbol':'4.2-2'}}</p>
<p>TWD-symbol-narrow: {{b | currency:'TWD':'symbol-narrow':'4.2-2'}}</p>
<p>EUR-symbol: {{b | currency:'EUR':'symbol':'4.2-2'}}</p>
<p>EUR-symbol-narrow: {{b | currency:'EUR':'symbol-narrow':'4.2-2'}}</p>
<p>CNY-symbol: {{b | currency:'CNY':'symbol':'4.2-2'}}</p>
<p>CNY-symbol-narrow: {{b | currency:'CNY':'symbol-narrow':'4.2-2'}}</p>

顯示

DatePipe (日期)

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

component.ts
-----
today: number = Date.now();

component.html
-----
{{today | date:'yyyy年MM月dd日HH點mm分ss秒'}}

顯示

DecimalPipe (數字)

{{ value_expression | number [ : digitsInfo [ : locale ] ] }}

component.ts
-----
b: number = 1.3456789;

component.html
-----
{{b | number:'4.1-5'}}

4：正整數字數長度 4
1-5：小數點後最小字數長度 1，最大字數長度 5

顯示

JsonPipe (Object 轉為 Json)

{{ value_expression | json }}

component.ts
-----
myStyle = { 'color': 'yellow', 'background-color': 'red' };

component.html
-----
<p>{{myStyle|json}}</p>

顯示

參考來源

1
CurrencyPipe
2
DatePipe
3
DecimalPipe
4
JsonPipe