在数字输入中显示小数点后 2 位的数字

Question

我有一个从最小：0到最大：1的输入。 默认值为 1。但是，我需要它显示为 1.00。我该怎么做？

输入网址：

<input id="scale"
name="scale"
class="ui-g-9"
type="number"
[min]="0"
[step]="0.01"
[max]="1"
[required]="true"
[(ngModel)]="product.scale" <!-- this default value is 1.00 -->
placeholder="Enter the scale">

Answer 1

通过在组件中使用@ViewChild来获取对输入元素的引用来修复它：

export class Component implements AfterViewChecked {
@ViewChild('scale') scaleInput;
/**
* Angular after view checked handler
*/
ngAfterViewChecked(): boolean {
// Display the default value: 1 with 2 decimal places: 1.00
this.scaleInput.nativeElement.value = parseFloat(this.scaleInput.nativeElement.value).toFixed(2);
return super.ngAfterViewChecked();
}
}

html 输入现在在哪里：

<input #scale <!-- IMPORTANT PART -->
id="scale"
name="scale"
class="ui-g-9"
type="number"
(input)="setTo2FractionalDigits($event)"
[min]="0"
[step]="0.01"
[max]="1"
[required]="true"
[(ngModel)]="ivcProduct.scale"
placeholder="Enter the scale">

Answer 2

第 1 步：编辑输入标签

<input id="scale"
name="scale"
class="ui-g-9"
type="number"
onchange="setTwoNumberDecimal"
[min]="0"
[step]="0.01"
[max]="1"
[required]="true"
[(ngModel)]="(product.scale).toFixed(2)" <!-- this default value is 1.00 -->
placeholder="Enter the scale">

步骤 2：编写 setTwoDecimalPlace 方法

function setTwoNumberDecimal(event) {
this.value = parseFloat(this.value).toFixed(2);
}