0%

Angular 筆記 - Pipe 管線元件:DecimalPipe

angular

DecimalPipe 小數點

數字轉換成字串, 根據本地化規則進行格式化,這些規則會決定分組大小和分組分隔符、小數點字元以及其它與本地化環境有關的配置項。

官網範例:

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

雖然這個管道名字叫做 DecimalPipe,但用在 template 的名稱卻是 number,比較需要注意的是這點。

另外可以看到 number 後方有兩個可選擇使用的引數,若沒有加上的話則為預設值,兩個引數都是字串的形式。

digitsInfo 數字格式

有以下格式可以選擇:

  • {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}。
  • minIntegerDigits:在小數點前的最小位數。預設為 1。
  • minFractionDigits:小數點後的最小位數。預設為 0。
  • maxFractionDigits:小數點後的最大為數,預設為 3。

預設值是 undefined

locale 本地化

要使用的本地化格式程式碼。 如果未提供,則使用 LOCALE_ID 的值,預設為 en-US。 應用設定地區(locale)可參考官網文件

預設值是 undefined
台灣是 zh-TW

下方是官方範例,先在 app.component.ts 匯入兩個預設值。

1
2
pi: number = 3.14;
e: number = 2.718281828459045;

帶入 template。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div>
<!--output '2.718'-->
<p>e (沒有套入引數): {{e | number}}</p>

<!--output '002.71828'-->
<p>e (3.1-5): {{e | number:'3.1-5'}}</p>

<!--output '0,002.71828'-->
<p>e (4.5-5): {{e | number:'4.5-5'}}</p>

<!--output '0 002,71828'-->
<p>e (french): {{e | number:'4.5-5':'fr'}}</p>

<!--output '3.14'-->
<p>pi (no formatting): {{pi | number}}</p>

<!--output '003.14'-->
<p>pi (3.1-5): {{pi | number:'3.1-5'}}</p>

<!--output '003.14000'-->
<p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>

<!--output '-3' / unlike '-2' by Math.round()-->
<p>-2.5 (1.0-0): {{-2.5 | number:'1.0-0'}}</p>
</div>

Demo