Question

我试图使用Bootstrap和Angular * ngFor loop指令进行折叠。但它只是从我的数据库中折叠/显示第一个数据。按钮的名称已经正确但当我点击它们时，每个按钮只会折叠/显示第一个按钮的内容和数据库的第一个数据。看起来我没有让它正常工作，任何人都可以帮我解决这个问题吗？

＆＃13;

<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>

＆＃13;

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 =“让列表列表”中的列表更改为列表

它可能有用

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

2 个答案: