在 Angular 5 中的 mouseenter/mouseleave 上在 li 内显示/隐藏元素

Question

所以我在 Angular 5 中有一个基本的 <ul>，其中包含一个 *ngFor，它基于数组填充其 <li> 子级。没有什么花哨。现在，我希望将鼠标悬停在 每个 li 上时，一支铅笔和一个垃圾桶图标变得可见。到目前为止，我设法使 all 铅笔和垃圾桶图标同时可见，但这不是我正在寻找的行为。我希望用户能够看到每个特定 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>

不确定这是否是目前最好的方法，但它会起作用。