Angular 2 组件模型刷新视图没有模型更改

Question

我有一个 Angular 2.4.0 应用程序，我正在处理一个表单，该表单有一些支持 Javascript validating/formatting 几个字段。字段格式化完成后，如果格式化返回的值与附加到模型的原始值匹配，则视图不会更新。有没有办法强制更新视图？由于没有模型更改，因此强制组件刷新没有任何效果。我猜我需要用 jQuery 之类的东西单独更新视图，但我想先检查是否有更好的解决方案。

组件： 导出 class 组件 { 字段：字符串

  formatField(updatedField: string) {
    this.field = updatedField.replace(new Regexp("[^\d]", "g"), ""); // remove everything except numbers
  }
}

HTML:

<html>
  <body>
    <input type="text" [ngModel]="field" (ngModelChange)="formatField($event)">
  </body>
</html>

上面的例子，如果型号是“1”，那么我输入"1;['];["，formatField returns "1"，屏幕还是会显示"1;['];[" 当我期望显示 "1" 时（这是 formatField 调用的返回值）。

编辑： 将示例中的 ngModelUpdate 修正为 ngModelChange（打字错误）。在描述中添加了 Angular 2 版本。

Answer 1

要刷新视图，您需要在对模型进行更改后显式运行更改检测器，然后您可以修改模型，ngModel 将更新值。

constructor(private cd: ChangeDetectorRef) {}

formatField(updatedField: string) {
    this.field = updatedField;
    this.cd.detectChanges();
    this.field = updatedField.replace(new RegExp("[^\d]", "g"), ""); // remove everything except numbers
}

Angular 2 组件模型刷新视图没有模型更改

Angular 2 component model refresh view without model changes

javascript

angular

angular-components