Angular *ngFor mouseenter 设置的范围标志的方法

Question

我正在从 angular.js 切换到 angular2/4 并且无法理解我应该如何实现以下模式...

<div *ngFor="let item of items" (mouseenter)="focus=true" (mouseleave)="focus=false">

    <span>{{text}}</span>

    <i *ngIf="focus" class="fa fa-pencil" aria-hidden="true"></i>

</div>

在 Angular.js 中，为 ng-for 的每个元素迭代创建了一个 focus 标志但在 Angular 中，focus 标志对所有迭代 div 都是全局的，导致当鼠标进入单个 div.

时显示所有铅笔图标

我对如何复制旧的 Angular.js 功能感到困惑？

（我 "solved" 通过在每次迭代中使用子组件暂时实现了这一点，但是，这似乎是一种锤子方法，尤其是在代码非常小的情况下...行在哪里绘制 ?)

谢谢西蒙·普莱斯

Answer 1

你可以这样做。

<div *ngFor="let item of items" (mouseenter)="item.focus=true" (mouseleave)="item.focus=false">

    <span>{{text}}</span>

    <i *ngIf="item.focus" class="fa fa-pencil" aria-hidden="true"></i>

</div>

Answer 2

我认为该方法使问题过于复杂，因为有一个更简单的选项不涉及 javascript。

首先将几个类添加到所涉及的两个元素（在本例中为 parent 和 child，但我们稍后可以使用的任何内容 select 可以使用):

<div *ngFor="let item of items" class="parent">
    <span>{{text}}</span>
    <i class="fa fa-pencil child" aria-hidden="true"></i>
</div>

然后你可以使用CSS使铅笔appear/disappear取决于鼠标是否悬停在项目上。

.parent .child {
    display: none;
}

.parent:hover .child {
    display: inline;
}

这可以缩短为以下内容，具体取决于需要支持的浏览器类型（参见 this overview）。

.parent:not(:hover) .child {
    display: none;
}

Angular *ngFor mouseenter 设置的范围标志的方法

Angular *ngFor approach for scoped flags set by mouseenter

mouseenter

angular-ng-if

ngfor

angular