在Angular 5中的mouseenter / mouseleave上的li內部顯示/隱藏元素

Question

所以我在Angular 5中有一個基本的<ul> ，其中包含一個* ngFor，它基於數組填充其<li>子級。 沒有什么花哨。 現在，我希望將鼠標懸停在每一個li上 ，可以看到鉛筆和垃圾桶圖標。 到目前為止，我設法使所有鉛筆和垃圾桶圖標同時可見，但這不是我想要的行為。 我希望用戶能夠看到每個特定li上都有一個編輯/刪除選項。

這是我的代碼，在此Plunk之后改編而成： https ://embed.plnkr.co/xgI5jOPI9HDUJb71RfmT/。

<ul class="list-group">
  <li class="list-group-item" (dblclick)="editTodo(todo)" *ngFor="let todo of todosList">
     <span (mouseenter)="mouseOvered=true" (mouseleave)="mouseOvered=false">
       {{todo.text}}
       <i [className]="mouseOvered ? 'fa fa-pencil' : 'hidden'" (click)="editTodo(todo)"></i>
       <i [className]="mouseOvered ? 'fa fa-trash' : 'hidden'" (click)="deleteTodo(todo)"></i>
     </span>
  </li>
</ul>

根據Saksham的建議進行編輯：

我添加了2個方法mouseEnter（todo）和mouseLeave（todo），並在其中分配了mouseOvered屬性給特定的懸停待辦事項。 所以現在，我的代碼如下所示：

app.component.html

...
<span (mouseenter)="mouseEnter(todo)" (mouseleave)="mouseLeave(todo)">
   {{todo.text}}
   <i [className]="todo.mouseOvered ? 'fa fa-pencil' : 'hidden'" (click)="editTodo(todo)"></i>
   <i [className]="todo.mouseOvered ? 'fa fa-trash' : 'hidden'" (click)="deleteTodo(todo)"></i>
</span>

app.component.ts

mouseEnter(todo) {
   todo.mouseOvered = true;
}
mouseLeave(todo) {
   todo.mouseOvered = false;
}

Answer 1

您可以做的是向todosList中的每個對象添加一個新屬性mouseOvered ，並使用false對其進行初始化。

然后，您要做的就是：

<ul class="list-group">
<li class="list-group-item" (dblclick)="editTodo(todo)" *ngFor="let todo of todosList">
 <span (mouseenter)="todo.mouseOvered=true" (mouseleave)="todo.mouseOvered=false">
   {{todo.text}}
   <i [className]="todo.mouseOvered ? 'fa fa-pencil' : 'hidden'" (click)="editTodo(todo)"></i>
   <i [className]="todo.mouseOvered ? 'fa fa-trash' : 'hidden'" (click)="deleteTodo(todo)"></i>
 </span>
</li>
</ul>

不知道這是否是最好的方法，但是它會起作用。