Angular2 在输入中显示两位小数

Question

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

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

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

原文由 Faabass 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最后我没有找到正确的答案……

我所做的是创建以下功能

fixDecimals(value : string){
    value = "" + value;
    value = value.trim();
    value = parseFloat(value).toFixed(2);
    return value;
  }

我将输入类型更改为文本（而不是数字）。

我在 ngOnInit 中调用这个函数，所以我总是向用户显示带小数点的数字。唯一悬而未决的是，如果用户更改值并删除小数点，则该数字将不会以相应的 00 完成。

我尝试使用 onChange，但提示转到输入的末尾（这对用户来说非常尴尬）

原文由 Faabass 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

要使用该包：

1. 安装软件包

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

1. 将其导入您的应用程序模块文件

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

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

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

   }

1. 在你的 component.html

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

原文由 JuanDM 发布，翻译遵循 CC BY-SA 4.0 许可协议