时间戳

首页 > 解决方案 > 减少 ngModel 函数绑定的负载

angular - 减少 ngModel 函数绑定的负载

问题描述

我正在尝试格式化数字输入，以便在必要时能够显示尾随零，这在默认情况下是不可能的。所以我尝试根据这个问题用一个函数覆盖 [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 不应该只在输入数据发生变化时调用该函数（类似于纯管道）吗？有没有另一种方法来实现格式化？

标签： angularperformancedata-bindingnumber-formatting

解决方案

这个尝试：

<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');
}

推荐阅读