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

Posted 2023-02-22

【中文标题】Angular 4 - 如何为 type=\'input\' 呈现 2 个小数位

【英文标题】：Angular 4 - how to render 2 decimal places for type='input'Angular 4 - 如何为 type='input' 呈现 2 个小数位

【发布时间】：2018-01-31 22:17:15

【问题描述】：

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 呈现其初始值？

【参考方案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.

【讨论】：

@harry 我正在尝试实现它对我不起作用...使用它->

这也可以与反应形式一起使用吗？

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

Even (change)="setTwoNumberDecimal($event)" 不需要

考虑使用 [ngModelOptions]="updateOn: 'blur'"，因为编辑变得乏味。

【参考方案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>

【讨论】：

谢谢，但问题是“我怎样才能获得渲染 2dp 的输入”而不是模板。