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

Question

是关于 restricting/validating 当用户将数据输入到数字类型的输入中时的输入。

我遇到的问题是，当模型首次加载时，任何整数或 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）- 这是独立于平台的尝试。

所以问题是：如何让输入以 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'">

有关拆分 [()] 绑定的详细信息，请参阅。

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

反应形式

回复评论中的问题： "Could this be used with reactive forms as well?"

答案是：

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

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

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

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>

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

Angular 4 - how to render 2 decimal places for type='input'

angular-directive

angular