角度* ngForアプローチのMouseEnter

Question

I/4をangular2トラブル私は、次のパターンを実装する方法を理解しておくことがangular.jsから切り替えています... Angular.js Aに

<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> 

focusフラグは、ng-forの各要素の反復に対して作成されましたが、Angularでは、すべての反復divに対してグローバルであり、マウスが1つのdivに入るとすべての鉛筆アイコンが表示されます。

古いAngular.jsの機能をどのように再現できるか混乱していますか？

は（私は一時的に反復ごとに子コンポーネントを使用することによって、これを「解決」している、しかし、これはラインが引かれている場合、コードは...非常に小さい場合は特にハンマーアプローチのように思える？）

ありがとう サイモン価格

Answer 1

私は、javascriptを伴わない単純なオプションがあるので、アプローチが問題を複雑にしていると思います。

まず関与している2つの要素にクラスのカップルを追加します（この場合は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; 
} 

Answer 2

このようにすることができます。

<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>