Javascript 当我使用ngFor动态创建标记时，mouseover无法正常工作

我试图在输入标记中指定鼠标悬停效果。但当我尝试将鼠标悬停在任何输入标记上时，它将影响所有输入标记

<td *ngFor="let d of Xyz">
    <input class="inputLabel" size="3" type="text" value="XYZ"  (mouseover)="hover = true" (mouseleave)="hover = false" [ngClass]="{inputCls: hover}"/>
</td>

这是我的代码：//Here在Angular 1.*版本中运行良好，但我想在2.0中做同样的事情，但它不工作

在这里，我静态地添加了输入标记，但我在AngularJS中使用*ngFor创建了这个标记

我只想在标记结束时执行鼠标悬停效果。

我会这样做：

<div ng-app>
  <input class="inputLabel" size="3" type="text" value="Xyz"  ng-mouseover="hover0 = true" ng-mouseleave="hover0 = false" ng-Class="{inputCls: hover0}"/>

  <input class="inputLabel" size="3" type="text" value="Xyz"  ng-mouseover="hover1 = true" ng-mouseleave="hover1 = false" ng-Class="{inputCls: hover1}"/>
</div>

我会这样做：

<div ng-app>
  <input class="inputLabel" size="3" type="text" value="Xyz"  ng-mouseover="hover0 = true" ng-mouseleave="hover0 = false" ng-Class="{inputCls: hover0}"/>

  <input class="inputLabel" size="3" type="text" value="Xyz"  ng-mouseover="hover1 = true" ng-mouseleave="hover1 = false" ng-Class="{inputCls: hover1}"/>
</div>

---

首先，您看到的行为是预期的。由于所有元素都将基于

hover

更改类，因此如果其中任何元素将hover更改为true，则所有元素都将获得inputCls并以hover模式显示

现在，如果我们想让它们独立运行，我们需要让ng mouseover和ng mouseleave设置一个特定于此元素的属性，并让inputCls依赖于该元素特定的属性

---

通过首先使用类似于

的东西，可以预期您看到的行为。由于所有元素都将基于
hover
更改类，因此如果其中任何元素将hover更改为true，则所有元素都将获得inputCls并以hover模式显示

现在，如果我们想让它们独立运行，我们需要让ng mouseover和ng mouseleave设置一个特定于此元素的属性，并让inputCls依赖于该元素特定的属性

通过使用类似于
的东西，鼠标悬停行为在这里是可以的。问题是您的解决方案在整个当前范围内设置了一个悬停atribute。每个标签都需要有单独的心房。尝试：



顺便说一句：您可能没有使用AngularJS，而是使用Angular2。请参见。
此处的鼠标悬停行为正常。问题是您的解决方案在整个当前范围内设置了一个悬停atribute。每个标签都需要有单独的心房。尝试：



顺便说一句：您可能没有使用AngularJS，而是使用Angular2。请参阅。
我正在使用*ng动态创建它，以便其始终悬停。任何其他建议。我正在使用*ng动态创建它，以便其始终悬停。任何其他建议。对不起，我是angular js的新手，请给出一些示例。对不起，我是angular js的新手，请给出一些示例。。