如果删除逗号，数字管道不会格式化值

Question

我有我在输入字段中使用的数字管道的工作示例：
https://stackblitz.com/edit/decimal-pipe-comma-separator-example-arg-h3gtrw?file=app%2Fshared%2Fnumber.pipe.ts

例如当我输入 11111 并在输入外部单击时，它会格式化为 11,111。但是，当我删除逗号并再次在输入外部单击时，它不会再次用逗号格式化。为什么会这样？当我调试代码时，它似乎返回了正确的值，但它显示了未格式化的数字。原始角度 DecimalPipe 似乎也是如此。我该如何解决？

我也在下面添加了管道和html代码：

import {
  Pipe,
  PipeTransform
} from '@angular/core';

@Pipe({
  name: 'numberFormat'
})
export class NumberFormatPipe implements PipeTransform {
  transform(value: number | string, minFractionDigits: number = 0, maxFractionDigits: number = 2, locale: string = 'en'): string {
    return new Intl.NumberFormat(locale, {
      minimumFractionDigits: minFractionDigits,
      maximumFractionDigits: maxFractionDigits
    }).format(Number(value));
  }
}

<div>
  <input type="text" [ngModel]="userNum | numberFormat" (ngModelChange)="userNum=$event" [ngModelOptions]="{updateOn:'blur'}">
</div>

Answer 1

由于数值没有改变，所以视图没有更新。您可以通过在设置真实值之前设置中间虚拟值来强制更改检测：

<input type="text" 
  [ngModel]="userNum | numberFormat"
  (ngModelChange)="setUserNum($event)" 
  [ngModelOptions]="{updateOn:'blur'}">

setUserNum(value) {
  this.userNum = undefined;                // Set temporary value
  this.changeDetectorRef.detectChanges();  // Force change detection
  this.userNum = value;                    // Set actual value (triggers change detection)
}

请参阅this stackblitz 以获取演示。

---

如果您想在多个字段上使用该技术，您可以定义一个通用的setValue 方法，在该方法中您可以通过其名称访问属性：

<input type="text" 
  [ngModel]="userNum | numberFormat"
  (ngModelChange)="setValue('userNum', $event)" 
  [ngModelOptions]="{updateOn:'blur'}">

setValue(key, value) {
  this[key] = undefined;
  this.changeDetectorRef.detectChanges();
  this[key] = value;
}

请参阅this stackblitz 以获取演示。