Angular * ngFor Ansatz für scoped Flags gesetzt von MouseEnter-

Question

ich von Angularjs am Schalt-/4 bis angular2 und haben Schwierigkeiten zu verstehen, wie ich das folgende Muster implementieren sollten ...

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

In Angularjs ein focus Flag wurde für jede Elementiteration der ng-für erstellt, aber in Angular ist die focus Flag global für alle iterierten div was dazu führt, dass alle Bleistiftsymbole angezeigt werden, wenn die Maus ein einzelnes div betritt.

Ich bin verwirrt, wie ich die alte Angular.js Funktionalität replizieren könnte?

(ich habe „gelöst“ diese vorübergehend mit einem Kind unter Verwendung von Komponenten für jede Iteration, jedoch scheint dies wie ein Hammer Ansatz vor allem, wenn der Code sehr klein ist ... wo ist die Grenze gezogen?)

Danke Simon Preis

Answer 1

Ich denke, dass der Ansatz das Problem überkomplizen ist, da es eine einfachere Option gibt, die kein Javascript beinhaltet.

Zuerst ein paar Klassen auf die beiden Elemente hinzufügen, die beteiligt sind (parent und child in diesem Fall, aber alles, was wir später verwenden können, um sie wählen können verwendet werden):

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

Sie dann kann CSS verwenden, um den Stift anzuzeigen/verschwinden, je nachdem, ob die Maus den Gegenstand bewegt oder nicht.

.parent .child { 
    display: none; 
} 

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

Dies könnte auf die folgenden verkürzt werden, je nachdem, welche Art von Browser (siehe this overview) unterstützt werden müssen.

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

Answer 2

Sie können es so machen.