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

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