"如何使用角度中的单击事件一次更改多个图标中的图标颜色"

Question

我有一个角度应用程序，其中我添加了 6 个图标。我的要求是，当我单击任何按钮时，特定图标颜色应从灰红色变为灰色，当我单击其他图标时，其他图标变为红色和以前的颜色更改按钮应更改为灰色。

我的角度代码是：

.component.html

<div class="container">
<span class="icon-number"></span><i class="smiley  icon-face-1"></i>
        <span class="icon-number"></span><i class="smiley  icon-face-2"></i>
        <span class="icon-number"></span><i class="smiley  icon-face-3"></i>
        <span class="icon-number"></span><i class="smiley  icon-4"></i>
        <span class="icon-number"></span><i class="smiley icon-face-5"></i>
        <span class="icon-number"></span><i class="smiley icon-face-6"></i>
</div>

那么任何人都可以帮助我如何使用角度中的点击事件更改特定图标的颜色。

Answer 1

<div class="container">
    <button *ngFor="let btn of btnArr" type="button" class="buttonstyle"
        [style.background-color]="selectedButton === btn ? '#FF0000' : 'grey'" (click)="selectedButton = btn">
        {{btn}}
    </button>
</div>

<div class="container">
    <i (click)="selectedIcon = icon.id" class="smiley" [ngClass]="icon.class"
        [style.color]="selectedIcon === icon.id ? '#FF0000' : '#000000'" *ngFor="let icon of iconsArr"></i>
</div>

Answer 2

在 Component.ts 文件中取一个变量并将其命名为currentButton=''<\/strong>

此外， .ts 端的 make on 功能将设置当前按钮

SetCurrentButton(buttonValue:string){
this.currentButton=buttonValue;
}