Выберите div из динамически создаваемых элементов div - Angular

Question

Я пишу код для динамического создания div элементов, используя директиву *ngFor, как показано ниже:

<div *ngFor = "let item of Items">
<p>Item : {{item}} </p>
</div>

Теперь, когда я наводю указатель мыши на определенную часть div, эту часть div нужно только выделить используя некоторые цвета фона.

Если я использую атрибут mouseenter в теге div, он выбирает все элементы div, а не выбирает точный, который я указывал мышью.

 <div (mouseenter) ="hovered=true" 
       (mouseleave) ="hovered=false" 
       *ngFor = "let item of Items"  
       [style.background]="hovered? 'red' : none">
      <p>Item : {{item}} </p>
  </div>

Так как это сделать?

Answer 1

Используйте псевдокласс CSS :hover

html

<div *ngFor="let item of items">
  <p class="hover-target">Item : {{item}} </p>
  <p>footer</p>
</div>

css

.hover-target:hover {
  background-color: red;
  /* whatever styles you want to apply */
}

Примечание - Ваш синтаксис *ngFor неверен. Это должно быть *ngFor="let item of Items"

DEMO: https://stackblitz.com/edit/angular-kp4zfv

Answer 2

Мне интересно, как работает само ваше *ngFor, причина в том, что вы используете let item in Items вместо let item of Items (это of не должно быть in)

приложение .component. html

<div *ngFor = "let item of Items">
  <p> Item: {{item}}  </p>
</div>

app.component. css

div:hover{
  background-color: yellow;
}

Рабочий Stackblitz

Редактировать:

Согласно отредактированному вопросу, вы назначаете наведение всем элементам, вместо этого вам нужно назначить наведение каждому отдельному элементу, используя их индекс, для которого вам нужно использовать, например,

<div (mouseenter)="hover=i" (mouseleave)="hover=-1" *ngFor = "let item of Items;let i = index"
       [style.background]="hover=== i ? 'red' : none">
  <p> Item: {{item}}  </p>
</div>

Теперь вы можете достичь результата без css и рабочего примера следующим образом:

Отредактированный стекблиц