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

【问题标题】：Angular *ngFor approach for scoped flags set by mouseenter由 mouseenter 设置的范围标志的 Angular *ngFor 方法
【发布时间】：2017-09-15 22:25:16
【问题描述】：

我正在从 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 功能感到困惑？

（我已经通过在每次迭代中使用子组件暂时“解决”了这个问题，但是，这似乎是一种锤子方法，尤其是在代码非常小的情况下......画线在哪里？）

谢谢西蒙·普莱斯

【问题讨论】：

您是否尝试过设置item.focus 而不仅仅是focus？
是的，这是我的第一种方法，但是用视图标志来装饰数据项似乎很脏。

标签： angular mouseenter ngfor angular-ng-if

【解决方案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>

【讨论】：

见上面的评论
那么如果您使用单个变量，您将如何识别哪个 div 被聚焦。你不能那样做。

【解决方案2】：

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

首先为所涉及的两个元素添加几个类（在本例中为parent 和child，但我们以后可以使用任何东西来选择它们）：

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

然后您可以使用 CSS 使铅笔出现/消失，具体取决于鼠标是否悬停在项目上。

.parent .child {
    display: none;
}

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

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

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

【讨论】：