Angular中的可折叠手风琴没有使用JS代码，但只有HTML。每当我点击按钮时，它什么都不做。请解决这个问题

Question

我正在尝试使用下面给出的HTML代码在我的网页上实现一个Accordion按钮。我目前正在非常基本的规模上实现这一点，而不使用任何带有此手风琴片段的JavaScript代码。按钮只是单击并且不执行任何操作，基本折叠不会发生，手风琴功能也不会实现。请帮我实现这个！

<div class="panel panel-default">
        <div class="panel-heading">
            <button class="btn btn-primary" type="button"
                data toggle="collapse" data-target="#collapseButtonExample" aria- 
                expanded="true" aria-controls="collapseExample">Question 
            </button>
        </div>

        <div class="collapse" id="collapseButtonExample" >
            <div class="card card-body">
                <p></p>
            </div>
        </div>
    </div>

Answer 1

如果有单个元素，这样的东西将起作用

<div class="panel panel-default">
        <div class="panel-heading">
            <button class="btn btn-primary"  type="button" #btn (click)="btn.toggle = !btn.toggle"
              >Question 
            </button>
        </div>

        <div  [ngClass]="{collapse:!btn.toggle}" >
            <div class="card card-body">
                <p>1# something</p>
            </div>
        </div>
    </div>

如果你有很多元素，这个技巧将起作用

<div class="panel panel-default" *ngFor="let i of [1,2,3,4]">
        <div class="panel-heading">
            <button class="btn btn-primary"  type="button" #btn (click)="btn.toggle = !btn.toggle"
              >Question 
            </button>
        </div>

        <div  [ngClass]="{collapse:!btn.toggle}" >
            <div class="card card-body">
                <p>{{i}}# something</p>
            </div>
        </div>
    </div>

stackblitz demo 🚀🚀