在角度 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}} {{num | currency:'USD':true}}但它不显示尾随 0。

Answer 1

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

解释 ：
number_expression | 数字[:数字信息]

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

number_expression：一个角度表达式，将给输出一个数字。

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

digitInfo ：它定义了数字格式。

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

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

找到说明。

minIntegerDigits ：最小整数位数。 默认值为 1。（在我们的情况下为 1）

minFractionDigits :小数位数的最小数量。 默认值为 0。（在我们的情况下为 2）

maxFractionDigits :最大小数位数。 默认值为 3。（在我们的情况下为 2）

Answer 2

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

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

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

作为您的问题，您有与货币管道相关的问题。 所以我想解释更多作为其他答案。

货币管道：

管道可以接受任意数量的可选参数来微调其输出。 我们通过在管道名称后面加上冒号 (:) 和参数值（例如，货币：'EUR'）来向管道添加参数。 如果我们的管道接受多个参数，我们用冒号分隔这些值（例如 slice:1:5）。

{{数量 | 货币：'your_type'：真：'1.2-2'}}

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

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

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

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

希望它有助于并澄清有关管道的更多信息！ @帕迪普！！

Answer 3

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

{{num | currency:'USD':true}} {{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 4

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

因此，要将数字转换为货币字符串：

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

Answer 5

以下将转换为 2 位十进制数字

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

角 2

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

Answer 6

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

如果任何机构收到警告并想解决它，请在我使用的修复程序下方找到。

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

警告：货币管道已在 Angular v5 中更改。 symbolDisplay 选项（第三个参数）现在是字符串而不是布尔值。 可接受的值为“code”、“symbol”或“symbol-narrow”。

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

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

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