Angular 2组件模型刷新视图，无需模型更改
Posted
技术标签:
【中文标题】Angular 2组件模型刷新视图，无需模型更改【英文标题】：Angular 2 component model refresh view without model changes 【发布时间】：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)">
【参考方案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组件模型刷新视图，无需模型更改的主要内容，如果未能解决你的问题，请参考以下文章