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

问题

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

Answer 2

您可以为每个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;
        }
      }

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

2 个答案:

问题

解决方案

ts

html