Question

我遇到了mouseenter的问题，我想当mouseenter向我显示我追踪的那个项目名称的图标，但在我看来它显示给所有项目。我想为每个项目徘徊显示我的图标

这里有一些代码。这是.ts

 showIcons(project: Project) {
 this.isIconsVisible = !this.isIconsVisible;

这是在html中

 <td (mouseenter)="showIcons()" (mouseleave)="showIcons()">
 {{project.name}}
 <div class ="row" *ngIf="isIconsVisible">
 <div class="fa fa-edit clickable edit-icon" (click)="editProject()">
 </div>
 <div class="fa fa-pencil clickable fa-fw" 
 (click)="openprojecteditdialog(project)"></div>
 <div class="fa fa-trash-o clickable delete-icon" 
 (click)="deleteProject(project)"></div>
 <div class="fa fa-files-o clickable copy-item" 
 (click)="copyProject(project)"></div>
 </div>

Answer 1

您是否忘记在showIcons功能中输入项目？

<td (mouseenter)="showIcons(project)" (mouseleave)="showIcons(project)">

我虽然不是角色专家......

Answer 2

问题是您正在为所有项目使用一个变量（isIconsVisible）。你想要做的是atach isIconsVisible作为每个项目的属性，然后使用它。

 <td (mouseenter)="showIcons()" (mouseleave)="showIcons(project)">
    {{project.name}}
    <div class ="row" *ngIf="project.isIconsVisible">
       <div class="fa fa-edit clickable edit-icon" (click)="editProject()">
       </div>

你的showIcons功能

showIcons(project: Project) {
 if(!project.isIconsVisible) {  // This will also check if the property is null 
    project.isIconsVisible = true;
 } else {
    project.isIconsVisible = false;
 }
 // project.isIconsVisible = !this.isIconsVisible;

或者在开始时将所有project.isIconsVisible初始化为false，这样您就可以使用project.isIconsVisible = !this.isIconsVisible;

当mouseenter显示所有projectname上的图标时

2 个答案: