在离子输入中强制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>

它适用于Web浏览器(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
  ]