angular 2、如何将一个数字显示为两位小数四舍五入的货币？

Question

示例：

1.99 --> 1.99 美元
1.9 --> 1.90 美元
1 --> 1.00 美元
1.005 --> 1.01 美元
1.004 --> 1.00 美元

我正在使用 {{num | currency:'USD':true}} 但它不显示尾随 0。

Answer 1

以下将转换为2位小数

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

angular 2

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

Answer 2

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

解释：
number_expression |数字[:digitInfo]

最后我们得到一个十进制数作为文本。找到描述。

number_expression: 一个 angular 表达式，它会给输出一个数字。

number : 与管道运算符一起使用的管道关键字。

digitInfo : 定义数字格式。

现在我们将了解如何使用digitInfo。 digitInfo 的语法如下。

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

找到描述。

minIntegerDigits : 最小整数位数。默认值为 1。（在我们的例子中为 1）

minFractionDigits : 最小小数位数。默认值为 0。（在我们的例子中为 2）

maxFractionDigits : 最大小数位数。默认值为 3。（在我们的例子中为 2）

Answer 3

<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

Answer 4

好吧，你得到了正确的答案，但我仍然认为我可以详细说明这个答案，所以将其作为答案发布：

首先，在我们的项目中有可用的 angular2 管道数量，其中一些在下面列出

CurrencyPipe , DatePipe, UpperCasePipe, LowerCasePipe, and PercentPipe and many more.

作为您的问题，您遇到了与货币管道相关的问题。所以我想像其他答案一样多解释一下。

货币管道：

管道可以接受任意数量的可选参数到fine-tune它的输出。我们通过在管道名称后跟一个冒号 (:)，然后是参数值（例如，currency:'EUR'）来向管道添加参数。如果我们的管道接受多个参数，我们用冒号分隔值（例如 slice:1:5）。

这里...第一个参数是货币类型，可以是 EUR、USD 或任何东西，第二个参数是 true/false，用于 symbolDisplay，默认为 false。然后第三个是范围限制，基本上是范围限制。您可以设置小数点后的最小和最大长度以及小数点前的固定数字（或默认留空）。

我在 angular2 中找到了一些很好的管道教程，我将发布在这里..

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

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

希望对管道有帮助并澄清更多有关管道的信息！！ @Pardeep !!

Answer 5

您使用的是正确的管道。您只需要将数字信息添加到输出即可。

{{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

Answer 6

如果您像我一样，尝试在 typescript/javascript 而不是 HTML 中执行此操作，您也可以使用 toLocaleString

所以要将数字转换为货币字符串：

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

Answer 7

如果有人收到警告并想解决它，请在下面找到我使用的修复方法。

以下是 Angular 显示在浏览器控制台中的警告：

Warning: the currency pipe has been changed in Angular v5. The symbolDisplay option (third parameter) is now a string instead of a boolean. The accepted values are "code", "symbol" or "symbol-narrow".

导致警告的格式：currency: "USD":true:"1.2-2"

修复：currency: "USD":'symbol':"1.2-2"

参考：https://angular.io/api/common/CurrencyPipe

angular 2、如何将一个数字显示为两位小数四舍五入的货币？

In angular 2, how to display a number as two decimal rounded currency?

currency

rounding

filter

angular

货币管道：