ngClass活动按钮功能Angular

Question

单击按钮后如何更改每个按钮的样式？

我有几个按钮，我需要实现类似于活动状态的功能，但实际上，您执行的是一个功能。

我尝试了以下操作，但是我没有达到活跃状态[ngClass]=" { 'btn-primary':categoria.nombre }

component.ts

ngOnInit() {
  this.eventos = this.fs.getEventosAll();
  this.categorias = this.fs.getCategorias();
}

filtrarEventos(categoria) {
 this.eventos = this.fs.filterEventos(categoria);
}

component.html

<button class="btn btn-sm" *ngFor="let categoria of categorias | async" (click)="filtrarEventos(categoria.nombre)" [ngClass]=" { 'btn-primary':categoria.nombre } ">
 {{ categoria.nombre }}
</button>

Answer 1

您可以首先向持有按钮的组件添加属性，例如categoriaActiva，然后添加

this.categoriaActiva = categoria

到filtrarEventos回调中，最后添加

[class.btn-primary]="categoria.nombre === categoriaActiva"

按钮。

Answer 2

这是您要尝试的stackblitz

我调用了一种设置点击索引值的方法

模板

   <div *ngFor="let categoria of categorias; let i = index" 
           (click)="changeState(i)" 
           [ngClass]="clickedIndex === i  ? 'primary' : 'secondary'">
       {{categoria.nombre}}
   </div>

组件

 changeState(index) {
    this.clickedIndex = index;
 }