---
# System prepended metadata

title: Pipes元件
tags: [pipes, Angular]

---

###### tags: `Angular` `pipes`

# Pipes元件

## {{ ‘傳入值’管你傳什麼 | pipe元件 }}

- 特性
  - pipes 與 pipes 間可串接
  - SlicePipe 可搭配結構型指令 (ngfor) 進行切割摘要

- 內建
  - DatePipe
  - UpperCasePipe => 全字母轉大寫
  - LowerCasePipe => 全字母轉小寫
  - CurrencyPipe
  - and PercentPipe
  - DecimalPipe => 數字標示顯示方法
  - CurrencyPipe => 貨幣顯示方法
  - SlicePipe => 切割 可切割字串及陣列

### DecimalPipe 標準式 數字標示顯示方法

```html
<P> {{ value_expression | number [ : digitsInfo [ : locale ] ] }}</P>
<!-- value_expression => 參數代號 與ts連動 . digitsInfo預設 一位.三位 => 0.123 -->
<p> {{e | number:'3.1-5'}}</p>
<!-- 代表小數點前 三位 點後 一到五位 -->
<p>e (french): {{e | number:'4.5-5':'zh-TW'}}</p>
<!-- 國際化表示數值 -->
<p> {{e | number:'3.5-5'}}</p>
<!-- 代表小數點前 三位 點後 顯示五位 -->
```

### CurrencyPipe 標準式 貨幣顯示方法

> 台幣 TWD

``` HTML
<p>{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}</p>

<!--output '$0.26'-->
<p>A: {{a | currency}}</p>
<!--output 'CA$0.26'-->
<p>A: {{a | currency:'CAD'}}</p>
<!--output 'CAD0.26'-->
<p>A: {{a | currency:'CAD':'code'}}</p>
<!--output 'CA$0,001.35'-->
<p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>
<!--output '$0,001.35'-->
<p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>
<!--output '0 001,35 CA$'-->
<p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>
<!--output 'CLP1' because CLP has no cents-->
<p>B: {{b | currency:'CLP'}}</p>

```

### PercentPipe 標準式 百分比顯示方法

``` HTML
<P> {{ value_expression | percent [ : digitsInfo [ : locale ] ] }} </P>
<!-- digitsInfo預設 兩位 : 0.123 => 12%  可指定 -->
```

### DatePipe

```HTML
<p> {{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }} </p>
```

- format 預設可傳入值為下
  - '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' (Jun 15, 2015).
  - 'longDate'   =>  'MMMM d, y' (June 15, 2015).
  - 'fullDate'   =>  'EEEE, MMMM d, y' (Monday, June 15, 2015).
  - 'shortTime'  =>  'h:mm a' (9:03 AM).
  - 'mediumTime' =>  'h:mm:ss a' (9:03:01 AM).
  - '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).

### SlicePipe 切割字串及陣列

```html
<!-- 標準式 -->
{{ value_expression | slice : start [ : end ] }}

<a [href]="item.href">{{item.title | slice:0:20}}</a>
<!--  顯示"從命令提示字元中開啟 Visual St" => 20字元  -->

<a [href]="item.href">{{item.title | slice:-20}}</a>
<!-- 顯示"從命令提示字元中開啟 Visual St" => 倒數20字元 -->
<!-- 不加結尾參數 -->

<article class="post" id="post0" *ngFor="let item of data |slice:0:3">
<!-- 1-3筆 -->
<article class="post" id="post0" *ngFor="let item of data |slice:2:3">
<!-- 只顯示第3筆 -->
```