javascript – Angular2在输入中显示两位小数

我有一个angular2应用程序,需要在一些计算后在输入中显示总共两位小数.但是虽然在组件中我强制有两个小数,但在输入中它显示的是零decinmal,一个十进制或数字所包含的小数,但我需要的是始终显示两个.

在控制器中,我强制以这种方式得到两位小数

return +(this.getCost() * this.getQuantity()).toFixed(2);

但是当我显示时,结果可能会有不同的小数

<input name="number" pattern="^[0-9]+(\.[0-9]{1,2})?" step="0.01" formControlName="number" type="button" class="form-control" id="number" >

添加我;使用TypeScript和字段类型是数字(我认为导致舍入)

解决方法

我建议你在输入字段上使用一个掩码有一个我以前用过的包 text-mask并且有效！

注意：看看你的html输入类型,你说的是数字,但实际上在你的问题中类型是按钮

要使用该包：

>安装包

npm i angular2-text-mask text-mask-addons –save
>将其导入您的app-module文件

import { TextMaskModule } from 'angular2-text-mask';

@NgModule({
  imports: [
    /* ... */
    TextMaskModule
  ]
  /* ... */
})
export class AppModule { }

>在你的component.ts

import createNumberMask from 'text-mask-addons/dist/createNumberMask';

@Component({   
  selector: 'app-my-component',templateUrl: './my-component.html',styleUrls: ['./my.component.scss'] }) 

  export class MyComponent implements OnInit { 
  public price = 0;

  private currencyMask = createNumberMask({
    prefix: '',suffix: '',includeThousandsSeparator: true,thousandsSeparatorSymbol: ',',allowDecimal: true,decimalSymbol: '.',decimalLimit: 2,integerLimit: null,requiredecimal: false,allowNegative: false,allowLeadingZeroes: false
  });

}

>在您的component.html中

<input type="text" [textMask]="{mask: currencyMask}" name="receivedname" id="received" class="form-control" maxlength="50" [(ngModel)]="price"/>

原文地址：https://www.jb51.cc/js/156245.html