角度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組件模型刷新視圖沒有模型更改

回答

相關問題