需要角度2货币管道显示2位小数并接受各种用户输入-Java 学习之路

我有一个输入，我需要显示货币 . 我需要它总是显示2个小数位和没有美元符号 . 我决定使用 number 管道因为我不关心美元符号 . 此输入可由用户编辑，但是当我使用管道时，我会遇到不良行为 .

Here is what the code looks like for the input:

<input type="text"
[ngModel]="myCurrencyVar | number:'1.2-2'"
(ngModelChange)="myCurrencyVar=$event">

这种方法的问题在于，如果用户想要输入类似 $2.55 的内容，当他们键入数字时，该值将跳转到 2.00 ，当他们输入数字 2 然后他们必须按两次 delete 键清除零，然后当他们点击 5 键时它将变为 $2.50 然后用户必须 delete 再次 zero 再次输入 5 .

I also tried:

<input type="text"
[ngModel]="myCurrencyVar | number:'1.0-2'"
(ngModelChange)="myCurrencyVar=$event">

但是当它需要在屏幕上显示_765336时，这种方法会显示类似 $2.5 的内容 . 我需要它一直显示美分，而不会有这种奇怪的行为 .

I also tried with the currency pipe:

currency:'USD':'':'1.2-2'"

是否有任何方法可以实现总是显示2位小数而不会在用户输入时表现得很傻？

UPDATE 1

在我得到更新为双向绑定的建议后，我将其更改为，但是当我更改输入中的美元金额时，模型似乎没有更新：

<input type="text"
([ngModel])="myCurrencyVar"
currencyMask [options]="{ prefix: '' }">

UPDATE 2

我的屏幕更新问题的解决方案是返回使用 (ngModelChange) 并在传递 $event 之后添加 update() 函数：

<input type="text"
[ngModel]="myCurrencyVar | number:'1.0-2'"
(ngModelChange)="myCurrencyVar=$event;update()">

1 回答

2

根据我的经验，我习惯于管道只更改只读数据或数据显示方式 . 为了更改Angular中输入的格式，我恢复使用自定义指令 .

这是我认为完成你要做的事情的指令：

https://www.npmjs.com/package/ng2-currency-mask

回复于 2024-04-26T10:55:27+08:00

需要角度2货币管道显示2位小数并接受各种用户输入

1 回答

相关问题