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

Question

我有一个 angular2 应用程序，它需要在一些计算后始终在输入中显示两位小数。但是，尽管在组件中我强制有两位小数，但在输入中它显示为零小数、一位小数或数字所具有的小数，但我需要的是始终显示两位。

在 Controller 中，我以这种方式强制保留两位小数

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 并且字段类型是数字(我认为这是导致四舍五入的原因)

Answer 1

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

注意:看你的html input type，你说的是number，其实你问题里的type是button

使用包:

1. 安装包

   npm i angular2-text-mask text-mask-addons --save

2. 在你的应用模块文件中导入它

   import { TextMaskModule } from 'angular2-text-mask';
   
   @NgModule({
     imports: [
       /* ... */
       TextMaskModule
     ]
     /* ... */
   })
   export class AppModule { }
   

3. 在你的 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
     });
   
   }
   

4. 在你的 component.html 中

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