angular – 在离子输入中强制2位小数精度

发布时间：2020-12-17 17:04:58 所属栏目：安全来源：网络整理

导读：我想在离子输入中始终显示精确到两位小数的数字.以便： 1.011.101.201.23 不显示为：1.1和1.2,但显示为1.10和1.20 我的模型是： export class HomePage { public myValue:number;} 使用html文件如下： ion-content padding h3Hello/h3 ion-row margin-right=

我想在离子输入中始终显示精确到两位小数的数字.以便：

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上测试)

有什么建议？

解决方法

存储输入的数字,并在输出值时使用 decimal pipe格式化.这将始终显示2dp

如果您想在组件本身内使用管道,可能作为验证逻辑的一部分,您可以注入它.

import { DecimalPipe } from '@angular/common';
class MyService {

    constructor(private decimalPipe: DecimalPipe) {}

    twoDecimals(number) {
        return this.decimalPipe.transform(number,'1.2-2');
    }
}

注意：您需要将其设置为app.module.ts上的提供程序

app.module.ts

import { DecimalPipe } from '@angular/common';

 providers: [
     DecimalPipe
  ]

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!