Question

所以我在Angular 5中有一个基本的<ul>，其中包含一个基于数组填充其<li>子项的* ngFor。没有什么花哨。现在，我希望将鼠标悬停在每个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属性分配给特定的hover-over todo。所以现在，我的代码看起来像这样：

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

您可以做的是将新属性 mouseOvered 添加到todosList中的每个对象，并使用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>

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

在Angular 5中的mouseenter / mouseleave中的li里面显示/隐藏元素

1 个答案: