当 webapp 启动时使 bootstrap collapsibles 为真/显示

Question

我需要帮助才能在应用启动时打开我的可折叠内容。有人能帮助我吗？对不起我的英语不好。

//component.ts

isCollapsed: boolean = true;

<!--component.html-->

<div class="container" *ngFor="let List of List; let i = index">
  <a href="#List-{{ i }}" class="btn btn-info" data-toggle="collapse">{{List.prdName}}</a>
  <div id="List-{{ i }}" 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

来自引导文档

.collapse.show shows content

所以你所要做的就是将元素绑定到适当的类，这样它就可以了

<div class="container" *ngFor="let List of List; let i = index">
  <a href="#List-{{ i }}" class="btn btn-info" data-toggle="collapse">{{List.prdName}}</a>
  <div id="List-{{ i }}" class="collapse" [class.show]="isCollapsed"> <!-- if the expression will be true class "show" will be applied. -->
    <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>