Angular循环div高亮问题：需默认选中一个且当前点击选中失效

问题分析 #

你存在两个核心问题：

1. 页面初始化时没有默认选中的div
2. 点击div无法触发高亮效果

修复方案 #

1. 设置默认选中项 #

在组件初始化时直接给selectedIndex赋值，指定默认选中的元素索引，比如默认选中第一个元素：

selectedIndex: number = 0;

data: string[] = ["D", "W", "M", "Q", "Y"];

setRow(_index: number) {
  this.selectedIndex = _index;
}

如果需要默认选中其他项，把初始值改成对应索引即可（比如选中第三个元素就设为2）。

2. 修复CSS样式优先级问题 #

当前highlight类和cycleHover类有重复属性，且样式优先级不足，导致点击后高亮效果不生效。调整CSS，只保留高亮状态的差异样式：

.cycleHover{
    cursor: pointer;
    padding: 5px 20px;
    margin: 4px;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: #010103;
    background-color: transparent;
    border-radius: 24px;
}

.highlight{ 
    background-color: #fff;
    color: #737D88;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
}

这样既减少代码冗余，又能保证高亮样式正确覆盖基础样式。

3. 验证事件绑定有效性 #

可以在setRow方法中添加控制台输出，确认点击事件是否正常触发：

setRow(_index: number) {
  this.selectedIndex = _index;
  console.log("选中索引：", _index);
}

如果控制台能输出对应索引，说明事件绑定正常，问题仅出在样式或初始化逻辑上。

效果验证 #

修改完成后：

• 页面加载时，指定的默认div会自动应用高亮样式
• 点击任意div，该div会切换为高亮状态，其余div恢复基础样式

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