如何为多个按钮创建Angular 2+切换？

Question

您好，我需要创建切换按钮，但是当我单击第一个按钮时，活动类适用于这两个元素。

HTML

 <button [class.active]="k" (click)="toggle()">1</button>
 <button [class.active]="k" (click)="toggle()">2</button>

TS

k: boolean = false;
toggle(): void {
   this.k = !this.k;
}

Answer 1

为单独的按钮使用唯一的字符串

<button [class.active]="button1" (click)="toggle("button1")">1</button>
<button [class.active]="button2" (click)="toggle("button2")">2</button>

您的函数可以修改为

toggle(button): void {
   this.button = !this.button;
}

注意：我只是为您提供一个想法，您应该为单独的按钮传递不同的值。

Answer 2

 <button (click)="toggle($event)">1</button>
 <button (click)="toggle($event)">2</button>

TS：

toggle(event): void {
    event.target.classList.toggle("active");
}

Answer 3

您需要使用两个不同的变量或一个数组进行绑定。

具有单独的变量

<button [class.active]="k1" (click)="k1 = !k1">1</button>
<button [class.active]="k2" (click)="k2 = !k2">2</button>

k1: boolean = false;
k2: boolean = false;

具有数组

<button [class.active]="k[0]" (click)="toggle(0)">1</button>
<button [class.active]="k[1]" (click)="toggle(1)">2</button>

k: boolean[] = [];
toggle(index: number): void {
    this.k[index] = !this.k[index];
}