提姆寫程式

0%

Angular 筆記 - Pipe 管線元件：DecimalPipe

發表於 更新於 分類於 Disqus：
直接改變數字格式

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