approche angulaire * ngFor pour les drapeaux scope fixés par mouseenter

Question

je passe d'un angularjs à angular2/4 et ont du mal à comprendre comment je devrais mettre en œuvre le schéma suivant ...

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

Dans un angularjs focus drapeau a été créé pour chaque élément itération de la ng-pour mais en Angulaire, le drapeau focus est global pour tous les div itéré, ce qui entraîne l'affichage de toutes les icônes de crayon lorsque la souris entre dans une seule div.

Je suis confus quant à la façon dont je pourrais répliquer l'ancienne fonctionnalité Angular.js?

(j'ai « résolu » ce temporairement en utilisant des composants de l'enfant pour chaque itération, cela semble toutefois comme une approche de marteau surtout si le code est très faible ... où est la ligne tracée?)

Merci Simon Prix

Answer 1

Je pense que l'approche est la question de surcharger il y a une option plus simple qui ne nécessite pas javascript.

d'abord ajouter deux classes pour les deux éléments qui sont impliqués (parent et child dans ce cas, mais tout ce que nous pouvons utiliser plus tard pour les sélectionner peut être utilisé):

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

Ensuite, vous peut utiliser CSS pour faire apparaître/disparaître le crayon selon que la souris survole l'objet.

.parent .child { 
    display: none; 
} 

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

Cela pourrait être raccourcies à ce qui suit, selon le type de navigateurs doivent être pris en charge (voir this overview).

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

Answer 2

Vous pouvez le faire comme ça.

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