逐步折叠Angular 7中的所有Bootstrap 4手风琴面板

如何解决逐步折叠Angular 7中的所有Bootstrap 4手风琴面板

我正在展示Bootstrap 4手风琴。手风琴显示/隐藏在按钮上。我想要一个函数来在显示手风琴时按比例关闭手风琴中的所有面板（多个）（因为有些面板在展开后保持打开状态）。

Bootstrap的文档显示了如何使用jQuery [此处] [1]折叠面板。但是我需要使用Angular / Typescript做同样的事情。我不确定示例代码将如何转换为Angular 7。

$('#myCollapsible').collapse({
  toggle: false
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordionContainer">
  <div class="accordion" id="accDataAccordion">
    <div *ngFor="let item of subItems; let i = index">
      <div id="heading{{i}}" data-toggle="collapse" attr.data-target="#collapse{{i}}" aria-expanded="false" aria-controls="collapse" class="panel-title">
        <span>
          <a href="javascript:void(0);" class="btn btn-link"> {{item.item}} </a>
        </span>
        <i class="fa"></i>
      </div>
      <div id="collapse{{i}}" class="collapse" attr.aria-labelledby="heading{{i}}" data-parent="#accordionExample">
        <ul>
          <li *ngFor="let subItems of item.subItems">
            <button class="btn btn-link">{{subItems.topic}}</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>