73

使用此代碼轉換。這是一個工作示例http://plnkr.co/edit/xnN1HnJtTel6WA24GttR?p=preview {{num | currency:'USD':true:'1.2-2'}}

說明：
number_expression | number [：digitInfo]

最後我們得到一個十進制數作爲文本。找到說明。

number_expression：一個角度表達式，它會給出一個數字。

number：與管道操作員一起使用的管道關鍵字。

digitInfo：它定義了數字格式。

現在我們將瞭解如何使用digitInfo。 digitInfo的語法如下。

{minIntegerDigits} {} minFractionDigits - {} maxFractionDigits

找到說明。

minIntegerDigits：最小整數位數。默認值爲1.（在我們的案例中爲1）

minFractionDigits：最小小數位數。默認值爲0.（在我們的案例2中）

maxFractionDigits：最大小數位數。默認是3.（在我們的情況2）

來源

2016-01-22 06:15:27 Mubashir

+0

@ g.sui請標記爲答案現在你有代表 – Jacques

+1

Soooooo詳細，與所有Angular 2一樣。有沒有辦法將這些選項設置爲默認值？（我在文檔中沒有發現任何有希望的東西） –

+0

此解決方案在safari中不起作用。當我打開這個鏈接 - http://plnkr.co/edit/xnN1HnJtTel6WA24GttR?p=preview在safari中。它不顯示預期的輸出。 –

4

下面將用2個十進制數字

{{num | currency : '$' : 2}}

角2

{{num | currency:'USD':true:'1.2-2'}}

來源

2016-01-22 05:38:52

+0

如預期在角2 –

+0

這不工作，這是不使用'$'直接代替你必須使用預定義的語法像'貨幣正確的方法USD'或'EUR'或類似的東西。 –

+0

我必須補充一點，我將模板加載到未定義的模型值時丟失了一些寶貴的時間。您需要爲將要進行貨幣管理的號碼設置初始值，否則它將無法完成所有工作。 – Felype

1

<input type="number" [(ngModel)]="myModel" (keyup)="onBlurMethod()"> 
<br> 
<br> The formatted currency is : 
<br> {{myModel | currency:'USD':true:'1.2-2' }}

這裏是工作示例。

http://plnkr.co/edit/pSK8p7u3oo4WsAB9aFBS?p=preview

來源

2016-01-22 11:14:09

+0

已經由@mubashir回答了。沒有新增加 –

+0

是的，它的唯一區別是文本字段正在工作。 –

+0

無所謂我認爲...問題與管道有關嗎？ –

18

以及你得到了正確的答案，但我仍然認爲我可以詳細更多這個回答張貼的答案：

首先，有可用的angular2中使用的管道數我們的項目其中一些如下所列

CurrencyPipe，DatePipe，UpperCasePipe，LowerCasePipe和PercentPipe等等。

這裏作爲你的問題你有貨幣管道的問題。所以我想解釋更多的其他答案。

CurrencyPipe：

甲管可以接受任何數量的可選參數的微調其輸出。我們通過用冒號（：）跟隨管道名稱，然後是參數值（例如，貨幣：'EUR'）向管道添加參數。如果我們的管道接受多個參數，我們用冒號分隔這些值（例如slice：1：5）。

here ...第一個參數是EUR，USD或其他貨幣類型，第二個參數對於symbolDisplay是true/false，這是false byDefault 。那麼第三個是範圍限制基本上是一個範圍限制。您可以設置小數點後的最小和最大長度以及小數點之前的位置的固定數字（或將其保留爲空白）。

我已經發現了一些很好的教程在angular2的喉管，我在這裏張貼..

http://voidcanvas.com/angular-2-pipes-filters/

https://angular.io/docs/ts/latest/guide/pipes.html

希望它可以幫助和澄清更多的管道！ @Pardeep !!

來源

2016-01-22 16:34:27

11

您正在使用正確的管道。您只需將數字信息添加到輸出。

{{num | currency:'USD':true}}應該是...

{{num | currency:'USD':true:'1.2-2'}}

參考：'USD'代表的貨幣類型，true表示是否顯示貨幣符號（$），以及'1.2-2'代表的數字信息。

數字信息是{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}。

minIntegerDigits是整數位使用，缺省值爲1
minFractionDigits的最小數目是分數後位數，缺省值爲0
maxFractionDigits的最小數目是分數後位數，缺省值爲3的最大數量。對於數字信息

源可以在這裏找到：https://angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html

來源

2017-02-03 18:23:06 Ant

5

如果像我一樣，你想這樣做了打字稿/ JavaScript的，而不是HTML，你也可以使用toLocaleString

所以將數字轉換爲貨幣字符串：

ppCurrency(number) { 
    return number.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); 
    }

來源

2017-05-25 00:27:13 swhitman

在角度2中，如何顯示一個數字作爲兩位小數圓整的貨幣？

回答

CurrencyPipe：

相關問題