鼠标悬停时输入字段更新答案

【问题标题】：Input fields updates when mouse is over鼠标悬停时输入字段更新
【发布时间】：2017-08-06 19:06:53
【问题描述】：

我制作了一个带有嵌套字段的 Angular 2 模型驱动表单。其中一个字段是数字字段，我正在使用 jquery 插件来格式化数字。我创建了一个指令来在添加新的输入行时初始化这个插件，但是当我添加新的行时，总必须除以所有行，它是一个数量。我在模型中的一个函数中进行了这种划分，以更新 formGroup 中的字段。

我的问题是，视图显示了每一行的新值，但是，插件正在格式化这个字段，当我将鼠标光标放在浏览器上时，浏览器只显示格式化的字段。似乎 Angular 并没有按应有的方式更新视图。

以下是一些关于正在发生的事情的图片：

首先出现图层时，顶部的第一个字段没有显示格式化，但它是。

以下是鼠标移动后的显示方式：

我添加了一些行，看看它们是如何显示的：

然后将鼠标移到上方：

Ps：不要告诉我“你不应该使用带有 angular blah blah blah ... 的 jquery”。我知道这一点，但我需要使用它。

【问题讨论】：

"你不应该使用带有 angular blah blah blah...".
问题是 Angular 没有收到有关更改值的通知，也没有运行更改检测。如果触发了 Angular 应用程序监听的事件，那么 Angular 就会运行更改检测。当您将鼠标悬停在输入上时，似乎就是这种情况。您需要通过 jQuery 让 Angular 知道需要运行更改检测。有不同的方法stackoverflow.com/questions/34827334/…
@GünterZöchbauer 我尝试在 chrome 控制台中使用 document.createEvent() 手动创建事件但没有成功，即使使用 mouseover 或 onmouseover 事件。我需要知道我需要触发哪个事件来产生角度来检测这种变化。编辑：我也在这里尝试过的 angular 中的那些强制更改检测的方法，没有用。
它必须是您的 Angular 应用程序监听的事件，例如 (myEvent)="false" 或 @HostListener('myEvent') handleMyEvent() {}。并且需要在正在侦听的组件内（在组件或其后代之一内）触发该事件。
我使用的 jquery 插件是 autoNumeric。它有自己的方法来设置输入和格式化它的值。当角度改变模型中的值时，它反映了输入的新值但autoNumeric没有检测到它，所以我添加了一个HostListener来监听ngModelChange并调用autoNumeric方法来设置值。现在这些值在输入中显示为格式化。感谢@GünterZöchbauer 的帮助。

标签： javascript jquery forms angular model-driven

【解决方案1】：

我最好的猜测是您所做的更改是在 Angular 之外进行的，因此它的更改检测引擎不知道这些更改。强制执行此操作的一种简单方法是使用 setTimeout

setTimeout(() => {
  // Code that modify model values go here
})

【讨论】：