我正在开发一个 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。
最佳答案
已经有一个内置的十进制管道可以为您执行此操作:
https://angular.io/api/common/DecimalPipe
但正如您所发现的,它们不适用于双向绑定(bind)。
这是一个使用您在此处使用的格式的讨论:Using Pipes within ngModel on INPUT Elements in Angular2-View
就我个人而言,我会使用内置的十进制管道来根据需要显示值。但让用户输入他们想要的任何格式。尝试按照某人键入的方式进行格式化总是会导致奇怪的边缘情况,例如当他们尝试删除字符时。
关于javascript - Angular:将输入数字限制为两位小数的更好方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48572823/