角度2组件模型刷新视图,无需更改模型

Ske*_*ums 5 javascript angular-components angular

我有一个Angular 2.4.0应用程序,我正在使用一个有一些支持Javascript验证/格式化几个字段的表单.当字段格式化完成时,如果从格式返回的值与附加到模型的原始值匹配,则视图不会更新.有没有办法强制视图更新?由于没有模型更改,强制组件刷新没有任何影响.我猜我需要用jQuery之类的东西单独更新视图,但我想先检查是否有更好的解决方案.

组件: 导出类Component {field:string

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

HTML:

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

在上面的例子中,如果模型为"1",那么我输入"1;['];["formatField返回"1","1;['];["当我希望显示时"1"(即formatField调用的返回值),屏幕仍将显示.

编辑:修复ngModelUpdatengModelChange示例(拼写错误).在描述中添加了Angular 2版本.

Rom*_*n C 8

要刷新视图,您需要在更改模型后显式运行更改检测器,然后您可以修改模型并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
} 
Run Code Online (Sandbox Code Playgroud)