如何修改ngFor循环中特定图标样式并获取全部图标集合？

嗨，这个坑我之前踩过！你说得没错——HTML里ID必须是全局唯一的，当你在ngFor循环里重复用同一个ID时，getElementById只会返回第一个匹配的元素，这就是为啥你的console.log只输出第一个图标内容。

更符合Angular设计理念的做法是用数据驱动视图，而不是直接操作DOM，下面给你两种实用方案：

方案一：推荐！数据驱动修改颜色 #

Angular的核心是数据绑定，我们可以给每个图标项添加一个状态属性，通过修改这个属性来控制颜色：

1. 组件类里定义带状态的图标数据 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-icon-list',
  templateUrl: './icon-list.component.html'
})
export class IconListComponent {
  // 给每个图标添加isActive状态，用来控制颜色
  iconList = [
    { name: '📱', label: '手机', isActive: false },
    { name: '💻', label: '电脑', isActive: false },
    { name: '🖨️', label: '打印机', isActive: false }
  ];

  // 点击按钮时切换指定图标的状态
  toggleIconColor(index: number) {
    this.iconList[index].isActive = !this.iconList[index].isActive;
  }
}

2. 模板里绑定状态到样式 #

<div *ngFor="let icon of iconList; let i = index" class="icon-item">
  <!-- 用ngStyle根据isActive动态设置颜色 -->
  <span class="icon" [ngStyle]="{ color: icon.isActive ? '#ff4500' : '#333' }">
    {{ icon.name }}
  </span>
  <button (click)="toggleIconColor(i)">切换颜色</button>
</div>

这样点击按钮时，只会修改对应图标的状态，Angular会自动更新视图的颜色，完全不需要手动操作DOM，这也是Angular官方推荐的方式，代码更易维护。

方案二：如果确实需要获取DOM元素集合 #

如果你因为某些特殊场景必须拿到所有图标DOM元素，可以用Angular的ViewChildren来获取，而不是用原生的DOM查询：

1. 组件类里使用ViewChildren #

import { Component, ViewChildren, ElementRef, QueryList } from '@angular/core';

@Component({
  selector: 'app-icon-list',
  templateUrl: './icon-list.component.html'
})
export class IconListComponent {
  iconList = ['📱', '💻', '🖨️'];

  // 通过模板引用变量获取所有图标元素
  @ViewChildren('iconRef') iconElements!: QueryList<ElementRef>;

  // 获取所有图标内容
  logAllIcons() {
    this.iconElements.forEach(el => {
      console.log(el.nativeElement.textContent.trim());
    });
  }
}

2. 模板里添加模板引用变量 #

<div *ngFor="let icon of iconList">
  <!-- 给每个图标加唯一的模板引用变量（不用ID） -->
  <span #iconRef class="icon">{{ icon }}</span>
</div>
<button (click)="logAllIcons()">输出所有图标内容</button>

ViewChildren会返回一个QueryList集合，里面包含所有匹配模板引用变量的元素，你可以遍历它来操作每个DOM节点，但还是建议优先用方案一，避免和Angular的变更检测机制冲突。

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