具有带li元素的列表。
当单击li元素时，我只需要隐藏/展开一个li元素。我用了angular6。
要扩展元素，我需要向li元素添加类'bx--accordion__item--active'，并将按钮属性'aria-expanded =“ false”'更改为true。
我该怎么做？
app.component.html
<ul data-accordion class="bx--accordion">
<li data-accordion-item class="bx--accordion__item">
<button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane1">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--accordion__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
<div class="bx--accordion__title">Section 1 title</div>
</button>
<div id="pane1" class="bx--accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
<li data-accordion-item class="bx--accordion__item" (click)="clickEvent()">
<button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane2">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--accordion__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
<div class="bx--accordion__title">Section 2 title</div>
</button>
<div id="pane2" class="bx--accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
<li data-accordion-item class="bx--accordion__item">
<button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane3">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--accordion__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
<div class="bx--accordion__title">Section 3 title</div>
</button>
<div id="pane3" class="bx--accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
<li data-accordion-item class="bx--accordion__item">
<button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane4">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--accordion__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
<div class="bx--accordion__title">Section 4 title</div>
</button>
<div id="pane4" class="bx--accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>