Angular：ngFor循环中下拉列表仅展开首个项的问题求助

嘿，这个问题我太熟啦！你现在遇到的核心问题是所有折叠面板和触发按钮都共用了同一个id和关联属性，浏览器找不到正确的对应关系，所以不管点哪个按钮，只会触发第一个匹配listCollapse id的面板。

问题根源 #

你的循环里，每个折叠面板的id都是listCollapse，按钮的href和aria-controls也都固定指向这个id：

<button ... href="#listCollapse" aria-controls="listCollapse">
<ul class="collapse" id="listCollapse">

浏览器规定页面内的id必须唯一，所以所有按钮都只会绑定到第一个出现的listCollapse元素上。

修改方案：给每个折叠元素生成唯一标识 #

我们可以利用循环里的item唯一属性（比如item.id）或者循环索引index，给每个折叠面板和按钮生成专属的id关联。

步骤1：更新循环，添加索引（如果item没有唯一id的话）

在*ngFor里加上let i = index，这样可以用索引作为唯一标识：

*ngFor="let item of list; let i = index"

步骤2：修改按钮和折叠面板的关联属性

把固定的listCollapse改成带唯一标识的名称，比如listCollapse-{{i}}或者listCollapse-{{item.id}}：

修改后的完整代码示例：

<ul>
  <li>
    <div class="col-md-4">
      <!-- 加上循环索引i -->
      <div class="checkbox" *ngFor="let item of list; let i = index">
        <div class="content-col">
          <label>
            <input type="checkbox" (click)="action(item, $event);" [checked]="item.checked">
            <span class="text-body">{{item.title}}</span>
          </label>
          <!-- 修改href和aria-controls为唯一id -->
          <button 
            [disabled]="!item.checked" 
            data-toggle="collapse" 
            data-collapse-icon="ChevronDown" 
            data-expand-icon="ChevronUp" 
            aria-expanded="false" 
            [attr.aria-controls]="'listCollapse-' + i"
            href="#listCollapse-{{i}}"
          >
            <i class="win-icon"></i>
          </button>
        </div>
        <!-- 修改折叠面板的id为唯一值 -->
        <ul class="collapse" id="listCollapse-{{i}}">
          <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
            <a role="menuitem" [routerLink]="[...]">DD 1</a>
          </li>
          <li routerLinkActive="active">
            <a [routerLink]="[...]" role="menuitem">DD 2</a>
          </li>
        </ul>
      </div>
    </div>
  </li>
</ul>

额外小提示 #

如果你的list里的每个item本身就有唯一的id（比如后端返回的item.id），用item.id代替索引i会更稳妥，避免因列表排序变化导致索引错乱的问题。

这样修改后，每个按钮都会精准关联到对应的折叠面板，点击不同的Chevron图标就只会展开自己对应的下拉列表啦！

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