在 webapp 启动时使 bootstrap 可折叠 true/show

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

来自 bootstrap 文档

.collapse.show shows content

所以你所要做的就是用适当的 class 绑定元素，这样它就会是

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

在 webapp 启动时使 bootstrap 可折叠 true/show

Make bootstrap collapsibles true/show when webapp starts

html

collapse

twitter-bootstrap

angular