将切换 ngclass 应用于多个按钮

问题描述

我是 Angular 的新手，仍在尝试进入 Angular 思维。我有几个按钮，如：

    <button class="btn" (click)="btn1()"  [ngClass]="test ? 'Style':'StyleChange'">btn1</button>
   <button class="btn" (click)="btn2()"  [ngClass]="test ? 'StyleChange':'Style'">btn2</button>
  <button (click)="btn3()"  [ngClass]="test? 'Style':'StyleChange'">btn3 </button>

而且我正在尝试通过 ngClass 应用多个类，以便一次只在一个按钮上使用活动类。我尝试以这种方式执行此操作，但是当我单击第三个按钮时，第一个按钮也会获得该类。我知道我可以使用 ngFor 并且更容易实现这一点，但我需要稍后处理每个按钮。

Component.ts 代码

test = true;
btn1(){

  this.test = !this.test;
}
btn2(){
 
  this.test = !this.test;
}
btn3(){
 
this.test=!this.test
}

解决方法

您可以只创建一个变量并在每次单击按钮时更改其值。

您的 component.ts 就是这种情况：

test: string = 'test1';

您的 html：

<button class="btn" (click)=" test='test1' " [ngClass]="test === 'test1' ? 'style':'styleChange'">btn1</button>
<button class="btn" (click)=" test='test2' " [ngClass]="test === 'test2' ? 'style':'styleChange'">btn2</button>
<button class="btn" (click)=" test='test3' " [ngClass]="test === 'test3' ? 'style':'styleChange'">btn3 </button>

您可以根据需要创建任意数量的按钮，并为每个下一个按钮更改一个值。

angular ng-class