Angular 4 - 如何为 type='input' 呈现 2 个小数位

Question

This question 是关于在用户将数据输入数字类型的输入时限制/验证输入。

我遇到的问题是，当模型首次加载时，任何整数或 1dp 的数字都只会以 1dp 呈现。例如 40 或 40.0 都显示为 40.0（而不是 40.00）。

我已添加此代码，以便在用户键入新值后，它会以 2dp 显示：

在模板文件中：

(change)="setTwoNumberDecimal($event)"

在组件文件中：

  setTwoNumberDecimal($event) {
    $event.target.value = parseFloat($event.target.value).toFixed(2);
  }

这适用于在用户更改值之后显示 2dp。

我尝试编写一个指令，该指令在数据最初加载时应格式化为 2dp，但尽管该指令确实会触发，但它不会将值更改为 2dp。

import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';

@Directive ({
  selector: '[fbDecimalFormat]'
})

export class DecimalFormatDirective {

  constructor(private el: ElementRef,
              private renderer: Renderer2) {
    //renderer.setAttribute(el, 'value', parseFloat(el.nativeElement.value).toFixed(2));
    this.el.nativeElement.value = parseFloat(this.el.nativeElement.value).toFixed(2);
  }

}

仅供参考，注释的渲染行不起作用（错误：setAttribute not recognized） - 这是一个独立于平台的尝试。

所以问题是： 如何获取输入以 2dps 呈现其初始值？

Answer 1

模板表单

对此的解决方案是使用内置的DecimalPipe（奇怪地称为数字）而不是对模型值使用双向绑定 - 即。从 [(ngModel)] 到 [ngModel] 和 (ngModelChange)

    <input type="number" step="0.01" 
            (change)="setTwoNumberDecimal($event)"
            (ngModelChange)="item.value=$event"
            [ngModelOptions]="{updateOn: 'blur'}"
            [ngModel]="setting.decimal_value | number:'1.2-2'">

有关拆分 [()] 绑定的更多信息，请参阅 this question。

另请注意，更新仅在用户离开控件（模糊）时触发，否则每次输入内容时都会更新，这将是令人沮丧的用户体验（感谢 @Mihail 的评论）。

反应式表单

针对 cme​​ts 中的问题： “这也可以与反应形式一起使用吗？”

答案是：

不，使用具有反应形式的管道更复杂。您可以仅使用管道来显示值，例如

 <p>{{form.get('name').value | myPipe}}</p> 

但我认为正确的方法是使用值访问器。更多信息here.

Answer 2

Number.toFixed(x) 将任何数字格式化为“x”个尾随小数。该数字被四舍五入，如果需要在小数点后使用“0”来创建所需的小数长度。在模板中，我们可以格式化值并验证值

value1 = 0
value2 = 0.0

<p>
  {{value1.toFixed(2)}} - shows 0.00
  {{value2.toFixed(2)}} - shows 0.00
</p>