Применить класс к определенному элементу внутри ngFor - PullRequest
Новая
       5

Применить класс к определенному элементу внутри ngFor

0 голосов
/ 24 сентября 2019

У меня есть цикл, который генерирует имена + значок.

Я бы хотел, чтобы этот значок отображался только при наведении курсора. 

<div class="elm" *ngFor="let element of callWorkflowData?.jobsList">
    <mat-card (mouseover)="hover=true" (mouseleave)="hover=false">{{element}}
        <mat-icon [ngClass]="hover?'show-icon':'hide-icon'" ng aria-hidden="false" aria-label="Example home icon">add</mat-icon>
    </mat-card>

</div>

На самом деле значок стал отображаться в списке всех карт при наведении курсора мыши.один элемент.

Хотелось бы, чтобы значок отображался только на элементе наведения

1 Ответ

0 голосов
/ 24 сентября 2019

В исходном коде то же условие применяется к привязке класса всех значков.Вот почему они все изменяются одновременно.

Вы можете определить свойство hoverElement в классе компонента.Он будет установлен для элемента hovered на mouseover и сброшен на mouseleave.Условие привязки класса будет проверять, соответствует ли переменная element этому hoverElement: 

<div class="elm" *ngFor="let element of callWorkflowData?.jobsList">
  <mat-card (mouseover)="hoverElement = element" (mouseleave)="hoverElement = null">{{element}}
    <mat-icon [ngClass]="hoverElement === element ? 'show-icon' : 'hide-icon'" ...>add</mat-icon>
  </mat-card>
</div>

См. этот стек для демонстрации.

Обратите внимание, что тот же результат может быть достигнут только с помощью CSS и селектора :hover: 

mat-card mat-icon {
  color: orange;
}

mat-card:hover mat-icon {
  font-weight: bold;
  color: darkgreen;
}

См. этот стек для демонстрации.

...