Html 更改ngFor中特定项目的样式

我有一组使用

ngFor

显示的图标，如下所示：

<mat-chip *ngFor="let category of categories" (click)="selected(category)" [selected]="category.selected" [matTooltip]="category.name">
      <mat-icon id="iconBar"> {{category.icon}} </mat-icon>
    </mat-chip>

---

console.log（loopedIcon.textContent）的结果只是第一个图标，因为我对多个元素使用相同的id？是否有一种方法可以从ngFor获取关于整个图标集合的信息？
是的，这是因为您在循环中使用id，id通常不用于多个项目，您可以使用一个类

<mat-chip *ngFor="let category of categories" (click)="selected(category)" [selected]="category.selected" [matTooltip]="category.name">
      <mat-icon class="iconBar"> {{category.icon}} </mat-icon>
    </mat-chip>

但是您不能在循环中执行类似的操作。
iconbar[i]。style
：：您到底想做什么？不，谢谢我将其转换为HtmleElement所需的一切，谢谢您的帮助。是否要更改背景色？颜色是否取决于类别的
选定标记？
<mat-chip *ngFor="let category of categories" (click)="selected(category)" [selected]="category.selected" [matTooltip]="category.name">
      <mat-icon class="iconBar"> {{category.icon}} </mat-icon>
    </mat-chip>

recolorRequired(){


  var iconBars = document.getElementsByClassName("iconBar");
  //iconBars will be an array of elements who has iconBar as class
  //loop through iconBars and find the element you want

  //recolor

}