So ändern Sie den Div-Hintergrund basierend auf dem Komponentenfeld beim Mouseover

Question

Ich habe ein Div, bei dem sich die Hintergrundfarbe ändert, wenn man darüber fährt. Außerdem muss ich die Farbe basierend auf einem Element in der Komponente auswählen.

<div *ngFor="let u of users;" 
  [style:hover.background-color] = "u.selected ? 'red' : 'blue' ">
</div>

Answer 1

从上面的评论链接中：

"实际上这不是一个Angular问题：伪元素不是DOM树的一部分，因此不会暴露任何可以用来与它们交互的DOM API。"

所以你可以使用CSS变量来代替：

样式文件：

.highlight:hover {
  background-color: var(--highlight-color);
}

模板：

<div class="highlight" *ngFor="let u of users;" 
         [ngStyle] = "{'--highlight-color': u.selected ? 'red' : 'blue'} ">
      {{ u.name }}
    </div>