Question

我正在使用一些按钮来过滤数据，我想知道如何保持该按钮的活动状态或根据当时激活的过滤器分配样式，我该如何实现？

我的stackblitz：https://stackblitz.com/edit/query-collections-in-angularfire2

<button *ngFor="let categoria of categorias" (click)="filtrarData(categoria.nombre)" class="btn btn-outline-primary btn-sm mx-1">{{ categoria.nombre }}</button>

Answer 1

您可以尝试ngClass。当所选值等于HTML中的值时。添加active课程。当你点击重置。只需删除currentValue

即可

HTML:
 [ngClass]="{'active': categoria.nombre === currentValue}"

Component.ts:

filtrarData(categoriaToFilter: string) {
  this.currentValue = categoriaToFilter;
}

getAvisos() {
  this.currentValue = '';
}

不要忘记导入Renderer2。

Answer 2

您可以将ngClass用于此

    <button 
      class="btn"
      *ngFor="let categoria of categorias" 
      (click)="filtrarData(categoria.nombre)"
      [ngClass]="categoria.selected ? 'activeButton' : 'normalButotn'>
   </button>

保持活动状态按钮ngClass / ngFor Bootstrap 4

2 个答案: