切换下拉菜单箭头和折叠的菜单标题

Question

这似乎是一个简单的问题，但不确定为什么我对此有一些麻烦。 我有显示不同菜单标题的侧菜单，每个标题（如果启用）将带有一个向下箭头。当用户单击向下箭头时，图标应切换为向上箭头，因为它显示了子内容。

我也想处理这个问题，以便每当用户单击箭头以展开时，上一个箭头会折叠其内容。

这是我的HTML：

<div class="refine-menu-category" *ngFor="let item of items">
                    <header class="refine-menu-subheader">
                        <a class="refine-menu-collapse" data-toggle="collapse" data-collapse-icon="ChevronDown" data-expand-icon="ChevronUp" aria-expanded="false" [attr.aria-controls]="item.id" [attr.data-target]="'#'+item.id">
                            <span class="refine-menu-subtitle" (click)="onClick(item)">{{item.name}}</span>
                            <span *ngIf="isActive" class="win-icon">DOWN ARROW HERE</span>
                        </a>
                    </header>
                    <ul *ngIf="isActive" class="collapse refine-menu-items refine-menu-collapse" [id]="item.id" data-toggle="buttons">
                        <li class="btn" routerLinkActive="active">
                            ...
                        </li>
                        <li class="btn" routerLinkActive="active">
                          ...
                        </li>
                    </ul>
                </div>