强制 2 小数点将精度置于离子输入中

Question

我想在离子输入中始终显示具有两个小数位精度的数字。因此：

1.01
1.10
1.20
1.23

不显示为：1.1 和

1.2，但显示为 1.10 和 1.20

我的模型是：

export class HomePage {
   public myValue:number;
}

使用 HTML 文件，如下所示：

<ion-content padding>
  <h3>Hello</h3>
  <ion-row margin-right="50px" margin-left="50px">
      <ion-input type="number" ng-pattern="/^[0-9]+(.[0-9]{1,2})?$/" step="0.01"
                 [(ngModel)]="myValue" placeholder="0.00"></ion-input>
  </ion-row>
</ion-content>

我也尝试过简单的：

<ion-input type="number" step="0.01"
                     [(ngModel)]="myValue" placeholder="0.00"></ion-input>

它适用于网络浏览器(MacOS，55.0.2883.95(64位((，但不适用于Android(在7.1上测试(

有什么建议吗？

Answer 1

将输入的数字存储为输入，并在输出值时使用十进制管道进行格式化。这将始终显示 2dp

{{ myValue | number:'1.2-2' }}

如果要在组件本身中使用管道(可能作为验证逻辑的一部分(，则可以注入它。

import { DecimalPipe } from '@angular/common';
class MyService {
    constructor(private decimalPipe: DecimalPipe) {}
    twoDecimals(number) {
        return this.decimalPipe.transform(number, '1.2-2');
    }
}

注意：您需要将其设置为provider app.module.ts

app.module.ts

import { DecimalPipe } from '@angular/common';
 providers: [
     DecimalPipe
  ]

Answer 2

                  **HTML : **                
 <ion-input type="number" [(ngModel)]="defaultQuantity" formControlName="defaultQuantity" (ngModelChange)="changeQuantity($event)">

    ***Function : ***
    import { ChangeDetectorRef } from '@angular/core';
    export class OrderPage {
    constructor(public cdRef : ChangeDetectorRef ){}
          changeQuantity(value){
                    //manually launch change detection
                    this.cdRef.detectChanges();
                    if(value.indexOf('.') !== -1)
                    {
                      this.defaultQuantity = value.substr(0, value.indexOf('.')+3);
                    } else {
                      this.defaultQuantity = value.length > 4 ? value.substring(0,4) : value;
                    }
                 }
    }

        **OUTPUT :** 
                1.01
                1.10
                1.20
                1.23