Как показать один элемент при вводе мышью - 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

Проблема

Проблема с 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

вы можете иметь уникальное состояние isHovering для каждого div, как это

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;
        }
      }