与货币管道的 Angular 2-Way 数据绑定答案

【问题标题】：Angular 2-Way data binding with currency pipe与货币管道的 Angular 2-Way 数据绑定
【发布时间】：2018-09-20 17:43:52
【问题描述】：

我有一个货币输入字段，它必须在 2 路绑定上下文中显示数据。也就是说，模型的数据必须能够更新值，用户的数据也必须能够更新值。

我的第一次尝试是这样的：

<input type="text" [(ngModel)]="price | currency">

这在单向上下文中运行良好。但是每当用户试图编辑输入时，我们就会得到一个错误，EX：

"InvalidPipeArgument: '$123.00 is not a number' for pipe 'CurrencyPipe'"

这个错误是有道理的，因为管道试图再次对输入值应用过滤器，但这次的值是我们的货币字符串，而不是数字。

我想过尝试做这样的事情：

<input type="text" [ngModel]="price" (ngModelChange)="price = $event.target.value">

但这里的值将是与以前相同的货币字符串。我想我需要做类似undo_currency_filter($event.target.value) 之类的事情，但如果不编写自定义且可能容易出错的方法，我看不到任何方法。

在 Angular 中完成这项任务的最佳方法是什么，最好不必编写如上所述的自定义方法？

【问题讨论】：

【解决方案1】：

我已经想出了如何以一种优雅的方式解决这个问题。

真的没有办法撤消货币管道，而且没有任何内置的东西可以做到这一点。但是，撤消它并不像我想象的那么困难。要将货币字符串转换回数字，您真正需要做的就是删除过滤器添加的额外字符。这可以通过这样的 RegEx 来完成：

Number(currency.replace(/[^0-9.-]+/g,""))

所以我的模板现在是：

<input [ngModel]="price | currency" (change)="price = Number(price.replace(/[^0-9.-]+/g,''))">

（我可能应该把它放在组件文件中，但这很好地说明了解决方案）。

我希望这可以帮助遇到类似问题的人。

PS：对于没有发表评论而对我投反对票的家伙，请告诉我原因。如果有更好的方法我可以改写这个问题，我很乐意这样做。

【讨论】：