将切换 ngclass 应用于多个按钮答案

【问题标题】：Apply toggle ngclass to multiple buttons将切换 ngclass 应用于多个按钮
【发布时间】：2021-03-06 21:45:36
【问题描述】：

我是 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
}

【问题讨论】：

标签： angular ng-class

【解决方案1】：

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

您的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>

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

【讨论】：