Angular ngFor列表点击时如何优雅切换单个元素专属样式

不要用原生JS操作DOM，这不符合Angular数据驱动视图的设计原则，用框架自带的ngClass、ngStyle配合状态变量就能实现，代码更简洁也更易维护。

实现步骤 #

1. 统一维护选中状态 #

你已经在ScrapListService里写了setSelected方法，直接在Service里存一个公开的selectedScrapId属性存当前选中项的ID即可，不需要额外操作DOM。
Service里补充的代码示例：

// scrap-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ScrapListService {
  // 存当前选中的废料项ID
  selectedScrapId: string | number | null = null;

  setSelected(id: string | number): void {
    this.selectedScrapId = id;
  }
}

如果你用响应式状态管理，也可以把selectedScrapId改成BehaviorSubject，配合async管道使用逻辑完全一致。

2. 改造子组件逻辑 #

子组件不需要接收$event对象操作DOM，点击时只需要调用Service更新选中ID即可：

// scrap-list.component.ts
import { Component, Input } from '@angular/core';
import { ScrapListService } from './scrap-list.service';
import { Scrap } from './scrap.interface'; // 替换成你自己的类型定义

@Component({
  selector: 'app-scrap-list',
  templateUrl: './scrap-list.component.html',
  styleUrls: ['./scrap-list.component.css']
})
export class ScrapListComponent {
  @Input() scrap!: Scrap;
  @Input() availableInput!: boolean;

  constructor(public scrapListService: ScrapListService) {}

  selectType(scrapId: string | number): void {
    // 只更新状态，不操作DOM
    this.scrapListService.setSelected(scrapId);
  }
}

3. 模板里用内置指令绑定样式 #

把默认按钮样式写在CSS文件里，选中态通过判断当前项ID是否等于全局选中ID来动态绑定，不需要手动遍历所有按钮重置样式，Angular的变更检测会自动完成视图更新：
首先写组件基础CSS：

/* scrap-list.component.css */
.container-scrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.legend {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-sample {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}
/* 按钮默认样式 */
.legend-button {
  width: 24px;
  height: 24px;
  background-color: whitesmoke;
  border: 1px solid grey;
  border-radius: 2px;
  cursor: pointer;
}
.legend-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

然后改造模板：

<!-- scrap-list.component.html -->
<div class="container-scrap">
  <div class="legend">
    <div class="color-sample" [ngStyle]="{'background-color': scrap.color}"></div>
    <p>{{scrap.scrapName}}</p>
  </div> 
  <div>
    <button 
      (click)="selectType(scrap.id)"
      class="legend-button"
      [ngStyle]="scrapListService.selectedScrapId === scrap.id ? {
        'background-color': scrap.color,
        'border-color': scrap.color,
        'background-image': 'url(../../assets/ajout_rectangle_active.png)',
        'background-size': 'cover',
        'background-position': 'center'
      } : {}"
      [disabled]="!availableInput"
    ></button>
  </div> 
</div>

父组件的*ngFor调用代码不需要做任何修改，保持原来的写法即可。

方案优势 #

• 没有任何原生DOM操作代码，完全符合Angular的设计规范，不会出现DOM查询失败、视图更新不同步的问题
• 不需要手动遍历所有按钮重置样式，状态变更时Angular会自动更新所有匹配项的样式
• 逻辑集中在状态层，后续如果要加默认选中、清空选中、默认项配置等需求，只需要修改selectedScrapId的值即可，不需要动视图层代码

内容的提问来源于stack exchange，提问作者Timothée Lambert