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

将数字存储为输入，并在输出值时使用decimal pipe格式化。这将始终显示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

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

2 个答案: