Question

我有一组使用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>

我试图在按下按钮时更改一个特定图标的颜色，我的试用是按下按钮时执行此功能：

recolorRequired(){


  var loopedIcon = document.getElementById("iconBar");
  console.log(loopedIcon.textContent);
  var requiredIcon = loopedIcon.textContent;

  //recolor

}

console.log(loopedIcon.textContent);的结果只是第一个图标，根据我的理解，因为我对多个元素使用相同的id？有没有办法从ngFor获取有关整个图标集的信息？

Answer 1

是的，因为你在循环中使用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>

你的功能变为

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

}

更改ngFor中特定项目的样式

1 个答案: