将活动类添加到每个单击的按钮Angular 4中 [英] Adding the active class to each clicked button, Angular 4

问题描述

我有

<button *ngFor="let button of buttons" [ngClass]="{'active': isClicked}" (click)="isClicked = !isClicked"

结果:

屏幕上的10x按钮.

当我单击按钮编号1时: 每个按钮将获得".active"类

When I click on the button number 1: Each button will get class ".active"

但是我想要:

当我单击按钮数字 1 :将获得课程.active".

When I click button number 1: will get class ".active".

当我单击按钮数字 3 时:将获得" .active"类.

When I click button number 3: will get class ".active".

当我单击按钮数字 6 :将获得课程.active".

When I click button number 6: will get class ".active".

结果:

按钮1 ，按钮3 ，按钮6 -每个按钮将获得".active"类.

Button 1, Button 3, Button 6 - Each this buttons will get class ".active"

该怎么做?

PLUNKER: https://plnkr.co/edit/lX3DjN46STmo6gfBkPCc?p=preview

推荐答案

只需维护一个临时数组

<button *ngFor="let button of [1,2,3,4]; let i = index" [ngClass]="{'active':isClicked[i]}" (click)="isClicked[i] = (isClicked[i]? false :true )">button</button>

在组件public isClicked = [];

工作提琴手-> https://plnkr.co/edit/MwuWhtBPPQUQCG2Y9qmx?p=preview

希望有帮助！

这篇关于将活动类添加到每个单击的按钮Angular 4中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！