Question

我有：

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

结果：

屏幕上的10x按钮。

当我点击第1号按钮时：每个按钮都会上课＆＃34; .active＆＃34;

但我想：

当我点击按钮数字 1 时：将获得课程＆＃34; .active＆＃34;。

当我点击按钮号码 3 时：将获得课程＆＃34; .active＆＃34;。

当我点击按钮数字 6 时：会上课＆＃34; .active＆＃34;。

结果：

按钮1 ，按钮3 ，按钮6 - 每个按钮都会上课＆＃34; .active＆＃34;

怎么做？

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

Answer 1

只需维护一个临时数组

<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 = [];

中

工作小提琴手 - ＆gt; https://plnkr.co/edit/MwuWhtBPPQUQCG2Y9qmx?p=preview

希望它有所帮助!!

Answer 2

使用(click)="isClicked = !isClicked"时，您要在所有按钮使用的组件上设置单 isClicked属性。相反，您可以将buttons数组扩展为列出对象，如下所示：

buttons = [
    { text: 'item1', isClicked: false },
    { text: 'item2', isClicked: false },
    { text: 'item3', isClicked: false },
    // ...
]

有了这个，每个按钮都有自己的isClicked。您可以像这样使用它：

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

Here's an updated plunker

将活动类添加到每个单击的按钮，Angular 4

2 个答案: