在 Angular 中显示 3 位小数的整数答案

【问题标题】：Display whole number with 3 decimal places in Angular在 Angular 中显示 3 位小数的整数
【发布时间】：2021-10-30 15:35:40
【问题描述】：

我有一个 Angular 应用程序，它有一个输入字段来输入数字。如果用户输入任何整数，我想显示小数点后 3 位的数字。例如，如果用户输入 6，则只要用户在输入字段外点击，它就会显示为 6.000。有什么角度的方法吗？

谢谢

【问题讨论】：

【解决方案1】：

您可以像这样在输入字段中使用蓝色事件：

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

在你的组件中这样做：

public usernumber;

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

最好的方法是使用 angular 提供的小数管道，但任何答案都没有提供如何使用它。您应该这样做以使其正常工作：

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

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

【讨论】：

【解决方案2】：

使用精度解析浮点数并使用事件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.
}

【讨论】：

【解决方案3】：

您可以使用角十进制管道https://angular.io/api/common/DecimalPipe

valueVariable | number:'0.3-3'

【讨论】：