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

Question

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

我的 angular 代码是：

.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>

所以谁能帮助我如何使用 angular 中的单击事件更改特定图标的颜色。

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>

在组件ts文件中

btnArr = ["BUTTON-1", "BUTTON-2", "BUTTON-3", "BUTTON-4", "BUTTON-5", "BUTTON-6"];
selectedButton = "";

iconsArr = [
        { id: 1, class: "icon-face-1" },
        { id: 2, class: "icon-face-2" },
        { id: 3, class: "icon-face-3" },
        { id: 4, class: "icon-face-4" },
        { id: 5, class: "icon-face-5" },
        { id: 6, class: "icon-face-6" }
    ];
    selectedIcon = 0;

Answer 2

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

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

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

现在从 Html 开始，在您的按钮代码中进行以下更改

<div class="container">

 <button type="button" class="buttonstyle" (click)="SetCurrentButton(btn1)" [ngStyle]="{'color':currentButton === 'btn1' ? 'red' : '' }">
          BUTTON-1
        </button>
        <button type="button" class="buttonstyle" (click)="SetCurrentButton(btn2)" [ngStyle]="{'color':currentButton === 'btn2' ? 'red' : '' }">
          BUTTON-2
        </button>
        <button type="button" class="buttonstyle" (click)="SetCurrentButton(btn3)" [ngStyle]="{'color':currentButton === 'btn3' ? 'red' : '' }">
          BUTTON-3
        </button>
 <button type="button" class="buttonstyle" (click)="SetCurrentButton(btn4)" [ngStyle]="{'color':currentButton === 'btn4' ? 'red' : '' }">
          BUTTON-4
        </button>
 <button type="button" class="buttonstyle" (click)="SetCurrentButton(btn5)" [ngStyle]="{'color':currentButton === 'btn5' ? 'red' : '' }">
          BUTTON-5
        </button>
<button type="button" class="buttonstyle" (click)="SetCurrentButton(btn6)" [ngStyle]="{'color':currentButton === 'btn6' ? 'red' : '' }">
          BUTTON-6
        </button>
</div>

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

How to change the color of a icon among multiple icons one at a time using click event in angular

click

onclick

typescript

angular-directive

angular