Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angular – 在离子输入中强制2位小数精度大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在离子输入中始终显示精确到两位小数的数字.以便

1.01
1.10
1.20
1.23

不显示为:1.1和1.2,但显示为1.10和1.20@H_944_10@

我的模型是:@H_944_10@

export class HomePage {
   public myValue:number;
}

使用html文件如下:@H_944_10@

<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>

我也尝试过:@H_944_10@

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

它适用于Web浏览器(MacOS,55.0.2883.95(64位)),但不适用于Android(在7.1上测试)@H_944_10@

有什么建议?@H_944_10@

解决方法

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

{{myValue |号码:’1.2-2′}}@H_944_10@

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

import { decimalPipe } from '@angular/common';
class Myservice {

    constructor(private decimalPipe: decimalPipE) {}

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

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

app.module.ts@H_944_10@

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

 providers: [
     decimalPipe
  ]

大佬总结

以上是大佬教程为你收集整理的angular – 在离子输入中强制2位小数精度全部内容,希望文章能够帮你解决angular – 在离子输入中强制2位小数精度所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。