Сделайте показать / скрыть элемент внутри li на mouseenter / mouseleave в Angular 5 - PullRequest
Новая
       4

Сделайте показать / скрыть элемент внутри li на mouseenter / mouseleave в Angular 5

0 голосов
/ 07 июня 2018

Итак, у меня есть базовый <ul> в Angular 5, содержащий * 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>

Редактировать, основываясь на предложении Сакшама:

Я добавил 2 метода, mouseEnter (todo) и mouseLeave (todo), и внутри них я назначил свойство mouseOvered конкретному зависшему 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;
}

1 Ответ

0 голосов
/ 07 июня 2018

Что вы можете сделать, это добавить новое свойство 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>

Не уверен, что это лучший подход, но он будет работать.

...