Angular中Bootstrap过滤按钮保持激活状态的实现方法问询

我来帮你搞定这个按钮激活状态的问题，在Angular里实现这个其实挺直观的，核心思路就是用一个变量跟踪当前选中的过滤器，然后动态给对应按钮绑定激活样式。下面是具体的实现步骤：

1. 在组件类中添加状态变量 #

首先在你的组件.ts文件里，定义一个变量来存储当前选中的分类名称：

selectedCategoria: string | null = null; // 初始值设为null，表示没有选中任何分类

2. 更新过滤方法，同步选中状态 #

修改你的filtrarData方法，在执行过滤逻辑的同时，更新刚才定义的状态变量：

filtrarData(categoriaNombre: string) {
  // 先更新选中状态
  this.selectedCategoria = categoriaNombre;
  
  // 这里保留你原来的过滤逻辑，比如根据categoriaNombre过滤数据
  // ... 你的现有代码
}

如果想要支持点击已选中按钮取消过滤的功能，可以改成这样：

filtrarData(categoriaNombre: string) {
  // 如果点击的是当前已选中的分类，就清空选中状态；否则设置为当前分类
  this.selectedCategoria = this.selectedCategoria === categoriaNombre ? null : categoriaNombre;
  
  // 后续过滤逻辑：如果selectedCategoria为null，就显示全部数据；否则过滤对应分类
  // ... 你的现有代码
}

3. 在模板中动态绑定激活样式 #

接下来修改按钮的模板，用Angular的[ngClass]指令根据选中状态切换CSS类。因为你用的是Bootstrap，我们可以把默认的btn-outline-primary换成选中时的btn-primary：

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

或者也可以保留默认类，只在选中时叠加/替换样式，写法更简洁：

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

这样一来，当你点击某个分类按钮时，它就会自动切换到激活的样式，再次点击（如果加了取消逻辑）就会变回默认样式，完美匹配你的过滤需求～

内容的提问来源于stack exchange，提问作者Paco Zevallos