绑定到 ngModel 的管道（纯或不纯）中的力变化检测

Question

我将 ngModel 值绑定到角度百分比管道，更新 ngModelChange 并将 updateOn 设置为模糊。它工作得很好，除非再次输入相同的值。再次输入相同的值时，管道不会检测到更改，并且该值显示为小数而不是百分比。我曾尝试将百分比管道重新创建为不纯管道，但这不起作用。即使值与以前的值相同，如何强制管道检测更改？

尝试让管道返回WrappedValue.wrap(this._latestValue);

尝试在更改功能中运行this._ref.detectChanges()

<input placeholder="Percentage" type="text" 
       [ngModel]="account.percentage | percent: '1.0-2'"
       (ngModelChange)="updateAssignments($event)" 
       [ngModelOptions]="{updateOn:'blur'}" class="ta-r" />

updateAssignments($event) {
    const cleanEvent = Number($event.replace(/[^\d.]/g, ''));
    account.percentage = (cleanEvent / 100);
}

期望值以百分比格式显示。重新输入后显示十进制值。

My Stackblitz Code

Answer 1

在尝试找到合适的解决方案时，我设法强制纯 currency 管道以相同的值 (here is the demo) 重新执行。但这并没有解决问题，因为即使管道重新执行，它最终也会返回相同的结果。因为该结果绑定到ngModel，因为@Input 就像[ngModel]="account.percentage | percent: '1.0-2'" ngOnChanges 钩子在ngModel implementation 中不会更新输入元素视图值。

这是（取自sources）ngModel 如何捕获更改和更新值/视图。

@Input('ngModel') model: any;
...

ngOnChanges(changes: SimpleChanges) {
  this._checkForErrors();
  if (!this._registered) this._setUpControl();
  if ('isDisabled' in changes) {
    this._updateDisabled(changes);
  }

  if (isPropertyUpdated(changes, this.viewModel)) {
    this._updateValue(this.model);
    this.viewModel = this.model;
  }
}

这是isPropertyUpdated的implementation

export function isPropertyUpdated(changes: { [key: string]: any }, viewModel: any): boolean {
  if (!changes.hasOwnProperty('model')) return false;
  const change = changes['model'];

  if (change.isFirstChange()) return true;
  return !looseIdentical(viewModel, change.currentValue);
}

// https://github.com/angular/angular/blob/53212db3ed48fe98c0c0416ae0acee1a7858826e/packages/core/src/util/comparison.ts#L13
export function looseIdentical(a: any, b: any): boolean {
  return a === b || typeof a === 'number' && typeof b === 'number' && isNaN(a) && isNaN(b);
}

因为changes: SimpleChanges 内的model 没有变化，isPropertyUpdated 返回 false 并且视图未更新。

所以我尝试按照 hacky 解决方法从头开始重新初始化输入并且它有效:)

我在输入上放置了一个虚拟变量来显示/隐藏元素；

<input 
  *ngIf="dummy"
  placeholder="Percentage" 
  type="text" 
  [ngModel]="account.percentage | percent: '1.2-2'"
  (ngModelChange)="updateAssignments($event)"
  [ngModelOptions]="{updateOn:'blur'}"
  class="ta-r"
/>

每当ngModelChange 发出输入时，输入就会被隐藏并立即显示

dummy = true;

constructor(private cdRef: ChangeDetectorRef){}

updateAssignments($event) {
  const cleanEvent = Number($event.replace(/[^\d.]/g, ''));
  this.account.percentage = (cleanEvent / 100);
  this.dummy = false;
  this.cdRef.detectChanges();
  this.dummy = true;
  this.cdRef.detectChanges();
  console.log("account.percentage:", this.account.percentage);
}

==>>> here is a working demo

Answer 2

它只会在您模糊输入后更新，因为您将 ngModelOptions 设置为仅在模糊时更新 :)

删除它应该可以解决问题。

Answer 3

试试[ngModelOptions]="{updateOn:'change'}"

https://stackblitz.com/edit/angular-6-material-starter-rdxhte?file=src/app/hello.component.html

<input placeholder="Percentage" type="text" 
       [ngModel]="account.percentage | percent: '1.0-2'"
       (ngModelChange)="updateAssignments($event)" 
       [ngModelOptions]="{updateOn:'change'}" class="ta-r" />