在角度 2 中，如何将数字显示为两位小数的四舍五入货币？

Posted 2023-02-27

【中文标题】在角度 2 中，如何将数字显示为两位小数的四舍五入货币？

【英文标题】：In angular 2, how to display a number as two decimal rounded currency?

【发布时间】：2016-04-28 15:13:49

【问题描述】：

例子：

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

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

【参考方案1】：

使用此代码。这是一个工作示例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）

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

【讨论】：

@g.sui 既然你有代表，请标记为答案

太冗长了，就像 Angular 2 的所有内容一样。有没有办法将这些选项设置为默认值？ （我在文档中没有发现任何希望）

此解决方案在 safari 中不起作用。当我在 Safari 中打开此链接时 - plnkr.co/edit/xnN1HnJtTel6WA24GttR?p=preview。它没有显示预期的输出。

不舍入一位小数怎么样？例如：12.9999 => 12.9

【参考方案2】：

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

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

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

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

货币管道：

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

数字 |货币：'your_type':true:'1.2-2'

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

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

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

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

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

【参考方案3】：

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

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

【参考方案4】：

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

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

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

【参考方案5】：

以下将转换为 2 位小数

num | currency : '$' : 2

角度2

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

【讨论】：

这不是直接使用$的正确方法，而是您必须使用预定义的货币语法，如USD或EUR或类似的东西。

我必须补充一点，在未定义模型值的情况下加载模板，我损失了一些宝贵的时间。您需要为将要通过货币管道传输的数字设置一个初始值，否则它将根本不起作用。

【参考方案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

【讨论】：

是的，唯一的区别是文本字段正在工作。

我认为没关系...问题与管道有关，不是吗？

【参考方案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