Angular+Bootstrap列表项选中异常：无法移除上一项active类

我看你现在遇到的问题是：列表默认第一项有active类，但点击其他项时，之前选中项的active不会被移除，点过的项全变成选中状态了对吧？这主要是因为你原来的代码里，[class.active]绑定的是first这个循环变量——它只会在初始化的时候标记第一项为激活，之后完全没跟用户的点击行为关联起来，所以旧的选中状态不会更新。

给你一个简单直接的解决方案，分两步来：

第一步：在组件类里维护选中状态 #

在你的组件.ts文件里，添加一个变量来跟踪当前选中的对手ID，还可以默认选中第一项：

// 组件类中定义变量
selectedOpponentId: number | null = null;

ngOnInit() {
  // 初始化时默认选中第一个对手（如果列表不为空）
  if (this.model?.availableOpponents?.length) {
    this.selectedOpponentId = this.model.availableOpponents[0].id;
  }
}

第二步：修改模板绑定逻辑 #

把模板里的列表项代码改成这样，用选中ID来控制active类，同时添加点击事件更新选中状态：

<ul class="list-group" id="list-opponents">
  <li 
    *ngFor="let opponent of model.availableOpponents" 
    [class.active]="opponent.id === selectedOpponentId" 
    id="{{ opponent.id }}" 
    (click)="selectedOpponentId = opponent.id"
    class="list-group-item list-group-item-action d-flex..."
  >
    <!-- 这里放你的列表项内容 -->
  </li>
</ul>

为什么这样改？ #

• 去掉了原来的data-toggle="list"：这个是Bootstrap原生JS的触发属性，和Angular的绑定逻辑会冲突，所以不用它。
• [class.active]="opponent.id === selectedOpponentId"：这会动态判断当前项是否是选中项，只有ID匹配的项才会加上active类，其他项自动移除。
• (click)="selectedOpponentId = opponent.id"：点击时更新选中ID，触发视图重新渲染，自动切换选中状态。

这样改完之后，点击任意列表项，之前的选中项会自动失去active类，只有当前点击的项保持激活状态，完美解决你的问题～

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