[英]Make show/hide element inside li on mouseenter/mouseleave in Angular 5
So I have a basic <ul>
in Angular 5 containing an *ngFor that populates its <li>
children based on an array. 所以我在Angular 5中有一个基本的
<ul>
,其中包含一个* ngFor,它基于数组填充其<li>
子级。 Nothing fancy. 没有什么花哨。 Now, I want that on hover over each li , a pencil and a trash icon become visible.
现在,我希望将鼠标悬停在每一个li上 ,可以看到铅笔和垃圾桶图标。 So far, I managed to make all pencil and trash icons visible at the same time, but this is not the behavior I am looking for.
到目前为止,我设法使所有铅笔和垃圾桶图标同时可见,但这不是我想要的行为。 I want the user to be able to see that there is an edit/delete option on each particular li.
我希望用户能够看到每个特定li上都有一个编辑/删除选项。
This is my code, adapted after this Plunk: https://embed.plnkr.co/xgI5jOPI9HDUJb71RfmT/ . 这是我的代码,在此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>
Edit based on Saksham's suggestion: 根据Saksham的建议进行编辑:
I added 2 methods, mouseEnter(todo) and mouseLeave(todo) and inside them I assigned the mouseOvered property to the particular hovered-over todo. 我添加了2个方法mouseEnter(todo)和mouseLeave(todo),并在其中分配了mouseOvered属性给特定的悬停待办事项。 So now, my code looks like this:
所以现在,我的代码如下所示:
app.component.html 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 app.component.ts
mouseEnter(todo) {
todo.mouseOvered = true;
}
mouseLeave(todo) {
todo.mouseOvered = false;
}
What you can do is add a new property mouseOvered to each object in todosList and initialize it with false. 您可以做的是向todosList中的每个对象添加一个新属性mouseOvered ,并使用false对其进行初始化。
Then, all you have to do is this: 然后,您要做的就是:
<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>
Not sure if this is the best approach out there but it will work. 不知道这是否是最好的方法,但是它会起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.