Question

我的html

中有下面的输入控件

 <input id="inputcntrl" type="text" value="{{(mynumber) | number:'2.2-2'}}" [(ngModel)]="mynumber" (blur)="validatemynumber()" />

正如您所看到的，我正在格式化输入文本以确保它具有两个十进制值。当用户在输入框中输入值时，它可以正常工作。 onBlur事件我正在检查用户输入的值，如果它不在范围内（min> mynumber＆gt; max），那么我将mynumber设置为min值。问题是mynumber显示最小值而没有格式化。 forex：如果min valule是10，那么输入框应显示10.00但它只显示10 ..任何想法如何解决这个问题？我正在使用angular2

更新：我认为在我的情况下问题是以某种方式与绑定相关..当我从我的组件更新mynumber时，新值反映在UI中，但其格式丢失。 mynumber变量的类型为number。我需要找到一种方法来使用组件

中的格式更新值

Answer 1

尝试mynumber.toFixed(2)

<input id="inputcntrl" type="text" value="{{mynumber.toFixed(2)}}" [(ngModel)]="mynumber" (blur)="validatemynumber()" />

以下是参考文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

Answer 2

如果您希望使用角度方式在组件上格式化mynumber，请尝试在组件中使用内置的 DecimalPipe （< em>与模板中使用的数字管道相同）。

import { DecimalPipe } from '@angular/common'

this.mynumber = this.decimal.transform(this.mynumber, '2.2-2');

<强> Plunker demo

输入框中的格式编号，带有两位小数

2 个答案: