*ngFor with Bootstrap Collapsible 只显示一个数据

Question

我正在尝试使用 Bootstrap 和 Angular *ngFor 循环指令进行折叠。但它只是折叠/显示我数据库中的第一个数据。按钮的名称已经正确，但是当我单击它们时，每个按钮只会折叠/显示第一个按钮的内容和数据库的第一个数据。看起来我没有让它正常工作，谁能帮我解决这个问题？

<div class="container" *ngFor="let List of List">
  <a href="#List" class="btn btn-info" data-toggle="collapse">{{List.prdName}}</a>
  <div id="List" class="collapse">
    <ul style="list-style: none">
      <li> {{List.prdName}}</li>
      <li> {{List.prdCategory}}</li>
      <li> {{List.prdSup}}</li>
      <li> <img src="{{List.prdImage}}"></li>
    </ul>
  </div>
</div>

Answer 1

href 值可能需要指向唯一的id。您可以使用索引作为 id。像这样的：

<div class="container" *ngFor="let item of List; let i = index">
  <a href="#List-{{ i }}" class="btn btn-info" data-toggle="collapse">{{item.prdName}}</a>
  <div id="List-{{ i }}" class="collapse">
    <ul style="list-style: none">
      <li> {{item.prdName}}</li>
      <li> {{item.prdCategory}}</li>
      <li> {{item.prdSup}}</li>
      <li> <img src="{{item.prdImage}}"></li>
    </ul>
  </div>
</div>

Answer 2

请将ngFor="let List of List"中的List改为list

它可能会起作用