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

发布时间：2020-12-17 17:59:25 所属栏目：安全来源：网络整理

导读：我有一个 HTML输入： input [(ngModel)]="item.value" name="inputField" type="text" / 我想格式化它的值并使用现有的管道： .... [(ngModel)]="item.value | currency:'USD':true" ..... 此外,我试图以下面的方式使用它,但它第一次给我理想的输出并在更新

我有一个 HTML输入：

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

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

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

此外,我试图以下面的方式使用它,但它第一次给我理想的输出并在更新字段时显示错误：

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

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

ERROR Error: InvalidPipeArgument: ” for pipe ‘CurrencyPipe’
at invalidPipeArgumentError (common.es5.js:2610)
at formatNumber (common.es5.js:3176)
at CurrencyPipe.webpackJsonp…/../../common/@angular/common.es5.js.CurrencyPipe.transform (common.es5.js:3350)
at LandingPageComponent.webpackJsonp…/../../../../src/app/guest-handling/landing-page/landing-page.component.ts.LandingPageComponent.transformAmount (landing-page.component.ts:54)
at Object.eval [as handleEvent] (LandingPageComponent.html:38)
at handleEvent (core.es5.js:12014)
at callWithDebugContext (core.es5.js:13475)
at Object.debugHandleEvent [as handleEvent] (core.es5.js:13063)
at dispatchEvent (core.es5.js:8607)
at core.es5.js:9218

解决方法

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

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

基本上使用ngModelOptions来更新模糊允许在输入字段中键入时不添加0.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!