Angular 2组件模型刷新视图，无需模型更改答案

【问题标题】：Angular 2 component model refresh view without model changesAngular 2组件模型刷新视图，无需模型更改
【发布时间】：2017-07-05 23:36:49
【问题描述】：

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

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

  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返回"1"，当我期待"1"显示时，屏幕仍然会显示"1;['];["而是（这是formatField 调用的返回值）。

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

【问题讨论】：

您使用的是哪个版本的 Angular 2？尝试将ngModelUpdate 更改为ngModelChange
我的错误，我在示例中放置了 ngModelUpdate 而不是 ngModelChange。我在 Angular 2.4.0 中使用 ngModelChange 来调用该格式方法，但如果模型值没有改变，视图仍然不会更新。
好的，我明白了。您可以尝试将您的函数绑定到 keyup 事件，例如：<input type="text" [(ngModel)]="field" (keyup)="formatField(field)">

标签： javascript angular angular-components

【解决方案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
}

【讨论】：

肮脏的黑客，但它的作品。是否有其他选项仅用于重新渲染输入视图？