Question

以下是HTML输入：

<input matInput [ngModel]="myDates[i][month]|number:'1.2-2'" (ngModelChange)="myDates[i][month]=$event" (blur)="singleUpdate('cargo', j + 1, myDates[i][month], i)">

在这种情况下，当我输入1时，结果变为1.00

但是，当我输入12时，结果变为1.002而不是12.00

我该如何解决此问题？

Answer 1

从技术上讲，您得到的输出是正确的，因为number管道会在输入达到ngModel内的值后立即尝试格式化输入。

在这种情况下，ngModelChange也无济于事。它将输出相同。

您必须利用blur事件和DecimalPipe。同样，您可以使用ngModel语法对[()]使用两种方式的绑定。

模板

<input [(ngModel)]="myDates" (blur)="formatNumber()">

component.ts

import { DecimalPipe } from '@angular/common';

constructor(private decPipe: DecimalPipe) {}

formatNumber() {
    this.myDates = this.decPipe.transform(this.myDates, '1.2-2');
}

Demo

如何在管道中使用ngModelChange

1 个答案: