각도 * ngFor 접근 mouseenter

Question

내가/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 에 대한 각 요소 반복에 대해 생성되었지만 focus 플래그는 모든 반복 된 div에 대해 전역으로 표시되므로 마우스가 단일 div로 들어갈 때 모든 연필 아이콘이 표시됩니다.

이전 Angular.js 기능을 어떻게 복제 할 수 있는지 혼란 스럽습니다.

(나는이 일시적으로 각 반복에 대한 하위 구성 요소를 사용하여 "해결"했다, 그러나,이 코드는 선이 그려지는 곳 ... 매우 작은 특히 망치 접근 것 같아?)

감사합니다 사이먼 가격

Answer 1

자바 스크립트를 사용하지 않는 간단한 옵션이 있으므로 접근법이 복잡해지고 있다고 생각합니다.

먼저 관련된 두 요소에 두 개의 클래스를 추가 (이 경우 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>