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

我有一个Angular 2.4.0应用程序我正在处理一个表单，它有一些支持JavaScript验证/格式化几个字段。格式化字段完成后，如果格式设置返回的值与附加到模型的原始值相匹配，则视图不会更新。有没有办法强制视图更新？由于没有模型更改，强制刷新组件没有任何影响。我猜我需要用jQuery等单独更新视图，但我想先检查是否有更好的解决方案。角度2组件模型刷新视图没有模型更改

组件： 出口类元器件{ 字段：字符串

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版本来描述。

来源

2017-02-16 Skeeterdrums

您使用的是Angular 2的哪个版本？尝试用'ngModelChange'来更改'ngModelUpdate' – mickdev

我的错误是，我把ngModelUpdate放在了ngModelChange的例子中。我在Angular 2.4.0中使用ngModelChange来调用该格式方法，但如果模型值没有改变，视图仍然不会更新。 – Skeeterdrums

好的，我明白了。你可以尝试将你的函数绑定到keyup事件上，如下所示：'' – mickdev

要更新视图，需要在对模型进行更改后明确运行更改检测器，然后您可以修改模型并且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 
}

来源

2017-02-16 22:04:40

这就是票，谢谢！ – Skeeterdrums

@罗曼，你救了我的一天！ – securecurve

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

回答

相关问题