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

如果您愿意为此使用第三方库，则可以使用ng2-currency-mask

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

这是您推荐的Working Sample StackBlitz。

Answer 2

不幸的是，正如您还猜到的，您不能使用带有ngModel 2方式绑定的管道。这是设计使然。

您可以通过以下方式使其工作：

[ngModel]="app1income | number" (ngModelChange)="app1income =$event"

Answer 3

我建议使用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" > 然后解析代码中的数字类型

角度8-如何在具有2路数据绑定的输入中使用管道？

3 个答案: