从动态创建的div元素中选择一个div-角度

Question

我正在编写代码，使用如下所示的div指令动态创建*ngFor元素：

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

现在，当我将鼠标悬停在特定的div部件上时，该div部件仅需要使用某些背景色高亮显示。

如果我在mouseenter标签上使用div属性，它将选择所有div元素，而不是选择我用鼠标悬停的确切元素。

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

那么该怎么做？

Answer 1

[我想知道您的*ngFor本身如何工作，原因是您使用的是let item in Items而不是let item of Items（它是of不应为in）

app.component.html

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

app.component.css

div:hover{
  background-color: yellow;
}

Working Stackblitz

Answer 2

使用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 */
}

Note-您的*ngFor语法错误。应该是*ngFor="let item of Items"
DEMO：https://stackblitz.com/edit/angular-kp4zfv