Angular中*ngFor列表索引重复错误：点击展示内部列表异常

看起来你遇到的问题根源很明确：你用了一个全局的selectedIndex变量来控制所有列表项的展开状态，这就导致所有<li>都会基于同一个变量判断是否显示内部列表——点击某一项时，所有索引和selectedIndex匹配的项都会触发显示，而且你模板里硬编码了selectedIndex === 0、selectedIndex === 1这种判断，不仅不灵活（新增指南项还要改模板），还会导致状态混乱。

下面给你两种可行的解决方案：

方案1：给每个指南项添加独立的展开状态（推荐） #

这种方式最直观，直接把展开状态绑定到每个guide对象上，不用依赖全局变量：

步骤1：初始化数据时添加状态属性 #

在组件的ngOnInit或者数据加载完成后，给每个guide加上isExpanded属性：

ngOnInit(): void {
  // 假设你的userGuideData是从接口或本地获取的数组
  this.userGuideData = this.userGuideData.map(guide => ({
    ...guide,
    isExpanded: false // 默认所有项都是折叠状态
  }));
}

步骤2：修改模板，绑定独立状态 #

把原来的全局selectedIndex逻辑替换成每个guide自己的isExpanded：

<div>
  <ol>
    <li *ngFor="let guide of userGuideData">
      <!-- 点击时切换当前项的展开状态 -->
      <a (click)="guide.isExpanded = !guide.isExpanded">{{guide.title}}</a>
      <!-- 根据当前项的isExpanded判断是否显示内部列表 -->
      <div *ngIf="guide.isExpanded">
        <ol>
          <li *ngFor="let desc of guide.description">{{desc}}</li>
        </ol>
      </div>
    </li>
  </ol>
</div>

方案2：用索引映射存储展开状态（不修改原数据） #

如果因为某种原因不能修改原userGuideData的结构，可以用一个对象来记录每个索引的展开状态：

步骤1：在组件里定义状态对象 #

// 用键值对存储每个索引的展开状态，默认都是false
expandedStates: {[index: number]: boolean} = {};

步骤2：修改模板绑定状态 #

<div>
  <ol>
    <li *ngFor="let guide of userGuideData; let i=index">
      <!-- 点击时切换对应索引的状态 -->
      <a (click)="expandedStates[i] = !expandedStates[i]">{{guide.title}}</a>
      <!-- 根据对应索引的状态判断是否显示 -->
      <div *ngIf="expandedStates[i]">
        <ol>
          <li *ngFor="let desc of guide.description">{{desc}}</li>
        </ol>
      </div>
    </li>
  </ol>
</div>

为什么原来的代码会出问题？ #

你原来的写法有两个核心问题：

1. 全局状态冲突：所有列表项共用同一个selectedIndex，点击某一项时，所有匹配该索引的判断都会触发显示（哪怕是其他项里的判断）。
2. 硬编码判断不灵活：模板里写死了selectedIndex === 0、selectedIndex === 1，如果后续新增指南项，你还要手动添加对应的*ngIf判断，完全不符合Angular的动态渲染思想。

上面两种方案都能解决这些问题，推荐用方案1，逻辑更清晰，也更符合组件化的设计思路。

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