Angular中ngFor循环生成的Collapse点击仅打开第一个的问题修复

问题根源 #

你所有折叠面板的id都设为了demo，按钮的data-target也都指向#demo。DOM中元素的id必须唯一，所以无论点击哪个按钮，浏览器只会找到第一个id="demo"的折叠面板，导致所有按钮都只触发第一个面板展开。

修复步骤 #

利用ngFor的索引i为每个折叠面板生成唯一的id，同时让对应按钮的data-target匹配这个唯一id：

修改后的HTML代码 #

<ng-container *ngFor="let card of infosArr ; let i = index">
    <button data-toggle="collapse" [attr.data-target]="'#demo-' + i">
        <h3 class="box-title"> open </h3>
    </button>
    <div id="demo-{{i}}" class="collapse">
        <div class="row">
          <div class="col-md-12">
             <div class="table-responsive">
                <table class="table table-striped table-bordered full-data-table">
                   <thead>
                      <tr>
                         <th>Name</th>
                         <th>Age</th>
                         <th>Year</th>
                         <th>Subject</th>
                      </tr>
                   </thead>
                   <tbody>
                      <tr *ngFor="let item of card">
                         <td>{{item.name}}</td>
                         <td>{{item.age}}</td>
                         <td>{{item.year}}</td>
                         <td>{{item.subject}}</td>
                      </tr>
                   </tbody>
                </table>
              </div>
            </div>
          </div>
       </div>
</ng-container>

关键改动说明 #

• 按钮部分：用[attr.data-target]="'#demo-' + i"动态绑定目标id，确保每个按钮指向对应索引的折叠面板
• 折叠面板部分：把id="demo"改成id="demo-{{i}}"，生成唯一的id（比如demo-0、demo-1、demo-2）
• 额外修正：原HTML中循环变量是infoArr，但TS里定义的是infosArr，已统一为infosArr避免数据加载异常

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