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

Question

这个问题是关于当用户将数据输入Number类型的输入时限制/验证输入。

我的问题是，当模型第一次加载时，任何整数或1dp的数字都只能用1dp呈现。例40或40.0都显示为40.0（而不是40.00）。

(change)="setTwoNumberDecimal($event)"

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

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）-这是一个独立于平台的尝试。

所以问题是：我如何得到输入以2dps呈现其初始值？

Answer 1

模板表单

解决方案是使用内置的decimalpipe（奇怪地称为number)，而不是对模型值-ie使用双向绑定。从[(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'">

有关拆分[()]绑定的更多信息，请参见此问题。

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

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