减少 ngModel 函数绑定的负载

Question

我正在尝试格式化数字输入，以便在必要时能够显示尾随零，这在默认情况下是不可能的。所以我尝试根据 this question 用函数覆盖 [ngModel] 绑定，结果是这样的：

<input type="number" [ngModel]="fmtNum(value)" (ngModelChange)="value = $event">

函数简单地将value转换为格式化字符串：

fmtNum(value: number): number|string {
  return formatNumber(value, 'en', '1.2-2');
}

这实际上工作得很好并且值显示正确（例如 0 => “0,00”，由于非英语区域设置而带有逗号）。不幸的是，页面开始变得迟缓，我发现，格式化功能基本上一直在调用。

有什么方法可以防止函数被反复调用吗？ Angular 不应该只在输入数据发生变化时才调用函数吗（类似于纯管道）？还有其他方法可以实现格式化吗？

Answer 1

这次尝试：

<input [(ngModel)]="value | formatNumber:'en':'1.2-2'" 
      (ngModelChange)="value=$event" name="inputField" type="number" />

或者如果您只是想根据某个事件使用它

在html

<input [(ngModel)]="numberValue" 
      (keyup)="fmtNum($event)" name="inputField" type="number" />

在组件中

numberValue = null;

public fmtNum(e: any): void {
  if (e && e != '') 
     this.numberValue = formatNumber(e.target.value, 'en', '1.2-2');
}

Reduce load on ngModel function bind