请求修正Angular中选中按钮切换时旧按钮颜色被修改的问题

问题根源 #

你的代码当前只能实现单选效果，核心问题：

1. 用单个变量selectedShopId存储选中项，无法记录多个选中状态
2. 手动操作DOM修改类名，违背Angular数据驱动的设计理念
3. ngClass中selected和unavailable绑定同一条件，逻辑冗余且错误

修正方案 #

改用数组存储所有选中项，通过Angular数据绑定控制按钮样式，完全移除手动DOM操作：

1. 修改HTML模板

<h1>Trade zone A</h1>
<div class="horizontal-array">
  <label *ngFor="let shop_id of myArray">
    <button 
      type="button" 
      [value]="shop_id" 
      [ngClass]="{'selected': selectedShopIds.includes(shop_id)}"
      (click)="onButtonClick(shop_id)"
    >
      {{shop_id}}
    </button>
  </label>
</div>

• 移除错误的unavailable类绑定（若需禁用已选中按钮，可单独添加[disabled]="selectedShopIds.includes(shop_id)"）
• 用数组includes方法判断当前按钮是否处于选中状态

2. 修改TS组件代码

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

@Component({
  selector: 'app-tradzone-a',
  templateUrl: './tradzone-a.component.html',
  styleUrls: ['./tradzone-a.component.css']
})
export class TradzoneAComponent {
  myArray: string[] = [];
  selectedShopIds: string[] = []; // 改为数组存储所有选中项

  ngOnInit(): void {
    // 从localStorage读取并解析选中数组
    const savedIds = localStorage.getItem('selectedShopIds');
    if (savedIds) {
      this.selectedShopIds = JSON.parse(savedIds);
    }
  }
  
  constructor(private router: Router) {
    // 生成TA1到TA116的店铺ID
    for (let i = 1; i <= 116; i++) {
      this.myArray.push(`TA${i}`);
    }
  }

  onButtonClick(shop_id: string) {
    console.log(`Button clicked for item ${shop_id}`);
  
    // 判断当前店铺是否已选中
    if (this.selectedShopIds.includes(shop_id)) {
      alert(`Shop ${shop_id} is already booked. Please choose another one.`);
      return;
    }
  
    // 添加到选中数组
    this.selectedShopIds.push(shop_id);
    // 存储到localStorage（数组转JSON字符串）
    localStorage.setItem('selectedShopIds', JSON.stringify(this.selectedShopIds));
  
    // 跳转到预订页面
    this.router.navigate(['/stall-booking'], { queryParams: { shop_id: shop_id } });
  }
}

• 将单个选中变量改为数组selectedShopIds，支持多选中状态
• 适配localStorage的存储规则：读取时解析JSON字符串，存储时转为JSON字符串
• 移除所有手动操作DOM的代码，完全依赖数据绑定控制样式

3. CSS样式补充

确保selected类的样式正确生效：

.selected {
  background-color: red;
  color: white;
  border: none;
  /* 可根据需求添加其他选中样式，比如圆角、阴影等 */
}

额外优化建议 #

• 若需支持取消选中，可在onButtonClick中判断，若店铺已在数组内则删除对应项
• 如需区分已选中和不可用状态，可单独维护unavailableShopIds数组，通过ngClass绑定不同样式

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