时间戳

首页 > 解决方案 > 如何在鼠标输入时显示一个元素 - Angular 4+

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

问题描述

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

.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>

组件.ts

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

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

标签： angulartypescriptmouseeventmouseenter

解决方案

问题

问题在于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>

推荐阅读