减少 ngModel 函数绑定的负载

Posted 2023-04-13

【中文标题】减少 ngModel 函数绑定的负载

【英文标题】：Reduce load on ngModel function bind

【发布时间】：2021-05-12 15:45:47

【问题描述】：

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

【参考方案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');

【讨论】：

感谢您的快速回复！您的第一个示例有效，我只需要使用 [ngModel]（不带括号）并编写一个自定义管道，因为 'formatNumber' 是一个简单的函数，它还添加数千个分隔符并打破数字 >= 1000。