Angular 保持活动状态按钮ngClass/Ng4用于引导4

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

我的闪电战：

{{categoria.nombre}

您可以尝试

ngClass

。当选定值等于HTML中的值时。添加

活动
类。
然后单击“重置”。只需删除
currentValue

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

Component.ts:

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

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

不要忘记导入渲染器2。
您可以使用ngClass进行此操作

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

它工作正常，但当我按下另一个重置按钮时，有一个细节，即当我没有处于该状态时，它仍然处于激活状态。当我已经离开这个活动的时候，有什么方法可以取消激活它吗？嗨@PacoZevallos。我更改了在单击“重置”按钮或其他选项卡时删除活动类的答案
错误：函数查询。where（）需要有效的第三个参数，但它未定义。
Hi@PacoZevallos，只需删除函数
filtrarData（）
中的
事件即可。现在它工作得很好，我已经尝试过了，但它不会在状态中产生任何更改。因此，如果您想在更改状态时刷新UI，则需要以不变的方式进行更新，以便组件生命周期开始，组件再次重新呈现并刷新UI。
    <button 
      class="btn"
      *ngFor="let categoria of categorias" 
      (click)="filtrarData(categoria.nombre)"
      [ngClass]="categoria.selected ? 'activeButton' : 'normalButotn'>
   </button>