代码之家 › 专栏 › 技术社区 › Paco Zevallos

ngClass主动按钮功能

angular

0

Paco Zevallos · 技术社区 · 7 年前

单击每个按钮后,如何更改其样式?

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

我尝试了以下方法,但没有达到活动状态 [ngClass]=" { 'btn-primary':categoria.nombre }

组成部分ts

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

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

组成部分html

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

0 回复 | 直到 7 年前

1

2

mbojko 7 年前

你可以先添加一个属性, categoriaActiva 在按住按钮的组件中,添加

this.categoriaActiva = categoria

到 filtrarEventos 回调,最后添加

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

按按钮。

2

Rajat Badjatya 7 年前

这是答案 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;
 }