如何在鼠标输入时显示一个元素 - Angular 4+

Question

我有一个表单需要在鼠标进入相关元素时显示一个取消图标。但是在鼠标输入时，所有取消图标都是可见的。我已经提到了类似的问题，但这些并没有解决我的问题。这是代码段

.html

 <div *ngFor='let tool of dropzone; let i=index' (mouseenter)="showIcon(i)" (mouseleave)="hideIcon(i)">
            <label>{{tool}}  </label></td>          
            <mat-icon (click)="cancel(tool,i)">
              <div *ngIf="isHovering">cancel </div>            
            </mat-icon>
 </div>

component.ts

showIcon(tool) {
    this.isHovering = true;
    console.log(tool)
  }
  hideIcon() {
    this.isHovering = false;
  }

如何在鼠标输入时只显示相关元素的取消图标？

Answer 1

你可以为每个 div 设置唯一的 isHovering 状态，就像这样

html

 <div *ngFor='let tool of dropzone; let i=index' (mouseenter)="showIcon(i)" (mouseleave)="hideIcon(i)">
                <label>{{tool}}  </label></td>          
                <mat-icon (click)="cancel(tool,i)">
                  <div *ngIf="tool.isHovering">cancel </div>            
                </mat-icon>
     </div>

component.ts

 showIcon(index:number) {
        if(index>=0){
           this.dropzone[index].isHovering=true
        }
      }
      hideIcon(index:number) {
        if(index>=0){
           this.dropzone[index].isHovering=false;
        }
      }

Answer 2

问题

问题出在 isHovering。您对所有人使用相同的变量。

解决方案

如果您不想触及现有变量 dropzone 那么您可以创建单独的对象来保存每个图标的状态。参考下面的实现

ts

iconsState = { };

showIcon(index) {
    this.iconsState[index] = true;
  }
  hideIcon() {
    this.iconsState[index] = false;
  }

html

    <div *ngFor='let tool of dropzone; let i=index' (mouseenter)="showIcon(i)" (mouseleave)="hideIcon(i)">
                    <label>{{tool}}  </label></td>          
                    <mat-icon (click)="cancel(tool,i)">
                      <div *ngIf="iconsState[i]">cancel </div>            
                    </mat-icon>
   </div>

如何在鼠标输入时显示一个元素 - Angular 4+

How to show one element on mouse-enter - Angular 4+

mouseevent

mouseenter

typescript

angular

问题

解决方案

ts

html