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

我有一个需要显示货币的输入。我需要它总是显示2位小数，没有美元符号。我决定使用

number

管道，因为我不关心美元符号。用户可以编辑此输入，但当我使用管道时，会出现不希望出现的行为

以下是输入代码的外观：

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

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

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

但这种方法会在屏幕上显示类似于

$2.5

的内容，当它需要

$2.50

时。我需要它在没有这种奇怪行为的情况下，一直显示出分寸

我还尝试了货币管道：

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

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

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

有没有办法让2位小数始终显示，而用户键入时，它不会表现得傻乎乎的

---

更新1

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

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

---

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

这里有一个指令，我认为它完成了您试图做的事情：

---

嗯。。。您建议的这个指令很好，但由于某些原因，ngModel不再更新。请继续，将您的ngModel合并到[（ngModel）]=“myCurrencyVar”中，而不是拆分输出和输入。注意我在ngModel上的香蕉壳。盒子里的香蕉没有骰子。只有当我删除

currencyMask

指令时，ngModel才会更新…@starfigher104，我认为模型正在更新，但在我更新另一个没有此指令的框之前，它不会反映在屏幕上。由于某些原因，该指令没有触发角度视图更新过程（我不知道它叫什么），我在这里看到它，我注意到模型没有被设置。