如何在组件字段为true且div被hover时修改其背景色？

你直接用 [style:hover.background-color] 的写法是无效的，因为Angular的属性绑定不支持CSS伪类选择器（比如:hover）。这里给你两种可行的实现方式：

方法一：结合ngClass与CSS类 #

先在组件样式里定义两个类，分别对应不同状态下的hover样式：

/* 组件CSS文件 */
.selected-hover:hover {
  background-color: red;
}
.unselected-hover:hover {
  background-color: blue;
}

然后在HTML中通过ngClass根据u.selected的值切换类：

<div *ngFor="let u of users" 
     [ngClass]="u.selected ? 'selected-hover' : 'unselected-hover'">
  <!-- 这里放用户内容 -->
</div>

方法二：使用CSS变量（自定义属性） #

这种方式不需要定义多个类，直接通过Angular绑定动态设置CSS变量：

先在组件样式里使用变量定义hover样式：

/* 组件CSS文件 */
.user-item:hover {
  background-color: var(--hover-bg-color);
}

然后在HTML中绑定这个CSS变量：

<div *ngFor="let u of users" 
     class="user-item"
     [style.--hover-bg-color]="u.selected ? 'red' : 'blue'">
  <!-- 这里放用户内容 -->
</div>

两种方法各有优势：第一种兼容性更好，适合需要支持旧版浏览器的场景；第二种更灵活，当需要动态调整颜色值时（比如从接口获取颜色），不需要修改CSS代码。

内容的提问来源于stack exchange，提问作者mszareian