如何在Angular 5中点击时设置list-group的active状态？

嘿，我之前也踩过这个坑！你现在的问题大概率是用了一个全局布尔变量来控制所有列表项的active状态——比如所有<li>都绑定同一个isActive变量，一点击就把这个变量设为true，自然所有项都会变成active。

咱们换个思路，用当前选中项的唯一标识来做判断，就能精准控制单个项的激活状态了，具体步骤如下：

1. 组件TS文件设置逻辑 #

首先在你的组件类里定义一个变量存储当前选中项的ID（或者唯一标识），再写一个处理点击事件的方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  // 存储当前选中项的ID，初始值可以设为null或者默认选中的项ID
  selectedItemId: number | null = null;

  // 点击列表项时更新选中ID
  onItemSelect(itemId: number): void {
    this.selectedItemId = itemId;
  }
}

2. HTML模板绑定动态类 #

用Angular的[ngClass]指令，判断当前项的ID是否等于selectedItemId，相等就添加Bootstrap的active类：

<ul class="list-group">
  <li 
    class="list-group-item"
    [ngClass]="{'active': selectedItemId === 1}"
    (click)="onItemSelect(1)"
  >
    Cras justo odio
  </li>
  <li 
    class="list-group-item"
    [ngClass]="{'active': selectedItemId === 2}"
    (click)="onItemSelect(2)"
  >
    Dapibus ac facilisis in
  </li>
  <li 
    class="list-group-item"
    [ngClass]="{'active': selectedItemId === 3}"
    (click)="onItemSelect(3)"
  >
    Morbi leo risus
  </li>
</ul>

3. 循环渲染列表的优化方案 #

如果你的列表是从数组循环生成的（更符合实际开发场景），可以这样写：

TS文件新增数组数据 #

// 模拟列表数据，每个项带唯一id
listItems = [
  { id: 1, text: 'Cras justo odio' },
  { id: 2, text: 'Dapibus ac facilisis in' },
  { id: 3, text: 'Morbi leo risus' }
];

HTML模板用*ngFor循环 #

<ul class="list-group">
  <li 
    *ngFor="let item of listItems"
    class="list-group-item"
    [ngClass]="{'active': selectedItemId === item.id}"
    (click)="onItemSelect(item.id)"
    style="cursor: pointer;" <!-- 可选，给列表项加鼠标指针提示 -->
  >
    {{ item.text }}
  </li>
</ul>

额外小技巧 #

如果不需要用ID，也可以直接存储选中项的对象引用：

// TS里改成存储对象
selectedItem: any = null;

onItemSelect(item: any): void {
  this.selectedItem = item;
}

<!-- HTML里判断对象是否相等 -->
[ngClass]="{'active': selectedItem === item}"

这样改完之后，点击哪一项就只会给那一项加上active样式，不会再出现所有项都激活的情况啦，亲测在Angular5和Bootstrap4环境下完全有效～

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