Angular 4-如何在输入类型中使用货币管道

问题描述

我有一个HTML输入：

I have an HTML input:

<input [(ngModel)]="item.value" name="inputField" type="text" />

我想格式化其值并使用现有管道：

I want to format its value and use an existing pipe:

.... [(ngModel)]="item.value | currency:'USD':true" .....

我也尝试通过以下方式使用它，但这是我第一次获得理想的输出，并在更新字段：

Also I'm trying to use it the following way, but it's giving me desirable output for the first time and showing error while updating the field:

<input type="text"
   [ngModel]="item.value | currency:'USD':true"
   (ngModelChange)="item.value=($event)">

上面的代码导致以下错误。

The above code leads to following error.

错误错误：InvalidPipeArgument：''对于管道'CurrencyPipe'

在invalidPipeArgumentError（common.es5.js：2610）

在formatNumber（常见.es5.js：3176）

，位于CurrencyPipe.webpackJsonp ... / .. / .. / common/@angular/common.es5.js.CurrencyPipe.transform（common.es5.js：3350 ）

，位于LandingPageComponent.webpackJsonp ... / .. / .. / .. / .. / src / app / guest-handling / landing-page / landing-page.component.ts.LandingPageComponent。 transformAmount（landing-page.component.ts：54）
Object.eval上的
[作为handleEvent]（LandingPageComponent.html：38）
handleEvent上的
（core.es5.js： 12014）
在callWithDebugContext处
（core.es5.js：13475）
在Object.debugHandleEvent处
[作为handleEvent]（core.es5.js：13063）

在dispatchEvent（core.es5.js：8607）

在core.es5.js：9218

推荐答案

以下是使用货币管道的有效方法：

Here is what worked just fine with currency pipe:

<input matInput type="text" placeholder="Test Price" [ngModel]="testPrice | currency:'USD':'symbol':'2.2'" [ngModelOptions]="{updateOn:'blur'}"
      (ngModelChange)="testPrice=$event"/>

基本上使用ngModelOptions进行模糊更新，从而允许在输入字段中键入时不添加0。

Basically using the ngModelOptions to update on blur allows for the 0s not to be added while typing in the input field.

这篇关于Angular 4-如何在输入类型中使用货币管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！