typescript 在Angular 模式下显示整数和3位小数

k3fezbri 于 2023-01-31 发布在 TypeScript

关注(0)|答案(4)|浏览(244)

我有一个Angular 的应用程序，其中有一个输入字段输入数字。我想显示的数字与3个小数位，如果用户输入任何整数。例如，如果用户输入6，它应该显示为6.000只要用户点击输入字段外。有任何Angular 的方式做到这一点吗？
谢谢

4条答案

valueVariable | number:'0.3-3'

使用parse float with precision并使用事件keyup或focusout调用函数来转换数字。

<input 
    (focusout)="convert($event.target.value)"
></input>

convert(num){
  this.num = parseFloat(num).toFixed(3); //where this.num is the variable for the said number.
}

您可以在输入字段中使用蓝色事件，如下所示：

<input (blur)='addDecimals()' [(ngModel)]="usernumber"/>

在组件中执行以下操作：

public usernumber;

addDecimals() {
   this.usernumber.toFixed(3); // it will be a string
}

最好的方法是使用angular提供的decimal Pipe，但是答案中没有提供如何使用它。你应该这样做才能让它工作：

<input [ngModel]="item| number:'0.3-3' " 
      (ngModelChange)="item=$event" name="inputField" type="text" />

您可以查看here以了解更多详细信息，以及如何使用它。

在HTML部分中，输入值，然后添加number：'0.3 - 3'
{{值名称|编号：“0.3 - 3”}}