Angular 8 - 如何在具有双向数据绑定的输入中使用管道？

Question

在 Angular 方面我是一个相对的新手，我正在构建一个 Angular 应用程序并希望格式化一个输入字段，用户可以在其中输入他们的收入并且它需要进行格式化，使其前面都有一个 GBP 符号，并用逗号将值分隔成千位。

因此，例如，用户将他们的收入添加为 34000，它将显示为 £34,000

我正在尝试使用管道来帮助我实现这一点，我已经尝试使用 CurrencyPipe 和常规管道，但我遇到了同样的问题。因此，例如，我将使用数字管道：

<input type="number" (change)="getApp1income()" (keyup)="getApp1income()" [(ngModel)]="app1income | number" [ngModelOptions]="{standalone: true}" min="0" step="500" data-number-to-fixed="2" data-number-stepfactor="500" />

但是，这给了我以下错误：

Uncaught Error: Template parse errors:
Parser Error: Cannot have a pipe in an action expression at column 14 in [app1income | number=$event]

我在使用 CurrencyPipe 时也会遇到同样的错误。我认为这与 ngModel 使用 2 向数据绑定这一事实有关，因为我使用的是在别处输入的值。但我似乎根本找不到解决方案，而且我已经在此处和其他地方查看了各种类似的问题。

如有任何帮助，我们将不胜感激。

Answer 1

如果您愿意为此使用 third-party 库，您可以使用 ng2-currency-mask

npm install ng2-currency-mask --save
将 CurrencyMaskModule 添加到要在其中使用此模块的 imports 数组。
这样使用：<input currencyMask [(ngModel)]="value" [options]="{ prefix: '£ ', thousands: ',', precision: 0 }"/>

Here's a Working Sample StackBlitz for your ref.

Answer 2

我建议使用 ngx-mask： https://www.npmjs.com/package/ngx-mask
它使用起来非常简单，页面上有很多示例：
https://jsdaddy.github.io/ngx-mask-page/main

在您的情况下，它将是： <input type='text' prefix="£" mask="comma_separator.2" > 然后在您的代码中解析为数字类型

Angular 8 - 如何在具有双向数据绑定的输入中使用管道？

Angular 8 - How to use pipes in an input with 2-way data-binding?

typescript

angular-pipe

angular

angular8