javascript - Angular:将输入数字限制为两位小数的更好方法？

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" />

重要的是:此输入必须实现两种方式的数据绑定(bind)，例如我的 html 示例或 [(ngModel)]。

这可行，但当我尝试修改输入上的金额时，它会变得困惑，可能是因为我的管道在我键入时使用react。

Answer 1

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

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

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

这是一个使用您在此处使用的格式的讨论:Using Pipes within ngModel on INPUT Elements in Angular2-View

就我个人而言，我会使用内置的十进制管道来根据需要显示值。但让用户输入他们想要的任何格式。尝试按照某人键入的方式进行格式化总是会导致奇怪的边缘情况，例如当他们尝试删除字符时。