Question

我正在开发一个Angular 4应用，我需要在输入上显示金额，这些金额通常超过两位小数，即34.3899019，但我只需要显示前两位小数：34.38。

我已经设法通过创建自己的管道来实现：

import {Pipe, PipeTransform} from "@angular/core";

@Pipe({ name: 'TrimDecimalPipe'})
export class TrimDecimalPipe implements PipeTransform{
    transform(val) {
        return val.toFixed(2);
    }
}

并像这样使用它：

<input type="number" [ngModel]="payment.card.Amount | TrimDecimalPipe" (ngModelChange)="payment.card.Amount=$event" class="form-control" />

重要的事情：这个输入必须实现双向数据绑定，例如我的html示例或[（ngModel）]。

这有效，但当我尝试修改输入的数量时，它会变得混乱，可能是因为我的管道在输入时反应。

Answer 1

已经有一个内置的十进制管道为您执行此操作：

https://angular.io/api/common/DecimalPipe

但正如您所发现的那样，它们不适用于双向绑定。

使用您在此处使用的格式进行讨论：Using Pipes within ngModel on INPUT Elements in Angular2-View

就个人而言，我会使用内置的十进制管道来显示您需要的值。但是让用户输入他们喜欢的任何格式。尝试格式化为某些类型总是会导致奇怪的边缘情况，例如当他们尝试删除某个字符时。

Answer 2

我同意@DeborahK re：显示值的管道。

在这种情况下，你也可以考虑 not 使用管道，而是在用户输入通过绑定到blur事件后将值四舍五入到两位小数。

E.g。在模板中

<input type="number" [(ngModel)]="myValue" (blur)="onBlur($event)"/>

在组件中..

onBlur(evt){
    if(evt.target.valueAsNumber){
      this.myValue = evt.target.valueAsNumber.toFixed(2);
   }
}

Angular：输入时将数字限制为两位小数的更好方法？

2 个答案: