如何使用 4 角管道获取输入以显示和编辑货币

Question

我的目标是有一个输入字段，允许用户将数字编辑为货币。例如。用户看到“$1,000”，他们可以输入“0”，编辑框显示“$10,000”。生成的数据模型是一个数字 10000。

<input type="text" name="Data" [ngModel]="Data | currency:'USD':true:'4.0-0'" (ngModelChange)="Data=$event" >

上面显示在编辑框'$1,000'，但是当我编辑输入框中的值时，值不再是数字1000，而是一个字符串“$1,000”。这意味着我的数据模型来自

{ myCost: 1000 } 

成为

{ myCost: "$1,000" }

关于正确方法的任何想法？看起来我需要创建一个新函数来将货币转换回数字。这是可能的，但似乎有更好的方法。

Answer 1

您可以在组件类中处理 ngModelChange (ngModelChange)="onInputValueChange($event)"

在component.ts中
onInputValueChange(newValue: any):Number { return <Number>newValue; }