html - 当mouseenter显示所有元素名称上的图标时

我在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>

最佳答案

问题是您在所有项目中都使用了一个变量（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;