Ionic列表中如何高亮选中的单个/多个项

没问题！我来给你两种实用方案，分别实现单个或多个列表项的高亮选中效果，完全基于你现有的代码修改，上手很简单～

方案一：单选高亮（只能选中一项） #

首先在你的组件类里，新增一个变量来存储当前选中的路由项：

// 组件类中的代码
selectedRoute: any; // 保存选中的单个路由

selectCP(route: any) {
  this.selectedRoute = route; // 点击时切换选中项
}

接着修改模板，给按钮绑定条件样式——当当前项等于选中项时，添加selected类：

<ion-list>
  <button 
    ion-item 
    *ngFor="let route of Routes" 
    (click)="selectCP(route)"
    [class.selected]="route === selectedRoute"
  >
    {{route.Name}}
  </button>
</ion-list>

最后添加CSS样式，定义选中状态的外观（你可以根据需求自定义）：

.selected {
  background-color: #f0f0f0; /* 选中项的背景色 */
  font-weight: bold; /* 可选：加粗选中文字 */
  border-left: 4px solid #2196F3; /* 可选：左侧添加高亮边框 */
}

方案二：多选高亮（可选中多项） #

如果需要支持多选，只需要把存储选中项的变量改成数组，然后调整点击逻辑：

// 组件类中的代码
selectedRoutes: any[] = []; // 保存多个选中的路由

selectCP(route: any) {
  // 判断当前项是否已选中，切换选中状态
  const itemIndex = this.selectedRoutes.findIndex(r => r.Id === route.Id);
  // 注意：如果你的route对象没有Id，也可以用其他唯一标识，或者直接比较对象（引用类型需谨慎）
  if (itemIndex > -1) {
    this.selectedRoutes.splice(itemIndex, 1); // 已选中则移除
  } else {
    this.selectedRoutes.push(route); // 未选中则添加
  }
}

模板里修改样式判断条件，检查当前项是否在选中数组中：

<ion-list>
  <button 
    ion-item 
    *ngFor="let route of Routes" 
    (click)="selectCP(route)"
    [class.selected]="selectedRoutes.some(r => r.Id === route.Id)"
  >
    {{route.Name}}
  </button>
</ion-list>

同样添加CSS样式，还可以给多选加个勾选图标增强视觉反馈：

.selected {
  background-color: #f0f0f0;
  position: relative;
}

.selected::after {
  content: '✓';
  position: absolute;
  right: 16px;
  font-size: 1.3em;
  color: #4CAF50;
}

小提示 #

如果你的route是引用类型（对象），建议用唯一标识（比如Id）来判断是否选中，而不是直接比较对象本身，这样能避免因为引用不同导致的判断错误。

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