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

Question

我有一个需要在其中显示货币的输入。我需要它始终显示 2 位小数并且没有美元符号。我决定使用 number 管道，因为我不关心美元符号。此输入可由用户编辑，但当我使用管道时，出现不良行为。

下面是输入的代码：

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

这种方法的问题是，如果用户想输入类似 .55 的内容，当他们键入数字 2 时，该值将跳转到 2.00然后他们必须按 delete 键两次以清除零，然后当他们按 5 键时它将变成 .50 然后用户必须 delete最后 zero 再次进入决赛 5.

我也试过了：

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

但是当需要在屏幕上显示 .50 时，该方法会显示类似 .5 的内容。我需要它一直显示美分，而不会出现这种奇怪的行为。

我也试过货币管道：

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

有什么方法可以让 2 位小数始终显示，而不会在用户键入时表现得很愚蠢？

更新 1

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

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

更新 2

我对屏幕更新问题的解决方案是回到使用 (ngModelChange) 并在传入 $event 后添加一个 update() 函数，如下所示：

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

Answer 1

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

这是我认为可以完成您想要做的事情的指令：

Need angular 2+ currency pipe to show 2 decimals and accept various user input