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

Question

我有一个从 min: 0 到 max: 1 的输入。默认值为 1。但是我需要它显示为 1.00。我该怎么做？

输入html：

<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);
}