iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
Modern Web

Angular - 從零開始系列 第 20

Angular - 從零開始 - Day20 - Pipe 管線元件:currency

  • 分享至 

  • xImage
  •  

angular

currency 貨幣

把數字轉換成金額字串的格式,使用方法如下:

{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

傳入的值 | currency[:貨幣格式[:貨幣指示器 [:數字呈現選項 [:本地化格式]]]]

currencyCode 貨幣格式

  • 型別為 string
  • 預設格式為美金 USD。
  • currency 貨幣格式採用 ISO4217 的貨幣程式碼。

display 是否顯示貨幣代碼

  • 型別為 stringboolean。
  • code: 貨幣程式碼(如 USD)。
  • symbol(default): 展示貨幣符號(如 \$)。
  • symbol-narrow: 使用區域的窄化符號,它包括兩個符號。 比如,加拿大元的符號是 CA$,而其窄化符號是 $。如果該區域沒有窄化符號,則使用它的標準符號。
  • String: 使用指定的字串值代替貨幣程式碼或符號。 比如,空字串將會去掉貨幣程式碼或符號。

digitsInfo 數字呈現樣式

  • 型別為 string
  • {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}。
  • minIntegerDigits:在小數點前的最小位數。預設為 1。
  • minFractionDigits:小數點後的最小位數。預設為 0。
  • maxFractionDigits:小數點後的最大為數,預設為 3。
  • 若沒有提供則會根據 ISO 4217 規則判別。

locale 本地化

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

預設值是 undefined
台幣是 TWD

HTML

<div>
  <p>預設為美金:{{a | currency}}</p>
  <p>改為新台幣:{{a | currency:'TWD'}}</p>
  <p>顯示貨幣格式碼: {{a | currency:'TWD':'code'}}</p>
  <p>小數點前四位,小數點後兩位: {{a | currency:'TWD':'symbol':'4.2-2'}}</p>
  <p>改為窄化符號 NT$: {{a | currency:'TWD':'symbol-narrow':'4.2-2'}}</p>
  <p>改成日本貨幣:{{a | currency:'TWD':'symbol':'3.1-5':'jp'}}</p>
</div>

TS

a: number = 100;

Demo


上一篇
Angular - 從零開始 - Day19 - Pipe 管線元件:DecimalPipe
下一篇
Angular - 從零開始 - Day21- Pipe 管線元件:percent
系列文
Angular - 從零開始25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言