折叠/展开插入符号图标为所有项而不是仅一项更改

Question

在我的angular 2应用程序中，我正在使用一个折叠和扩展菜单，并且根据一个项目是否被扩展，图标会被切换。当前，当我展开一个菜单项时，图标会正确地切换和更改，但它也会对所有未展开的菜单项进行更改。

我如何确保图标css切换只发生在单击的菜单项。另外，我如何确保在展开新项之前，前一个展开的项也被折叠。因此一次只展开一个菜单项。

下面是我的Html，它是for循环的一部分：

<a data-toggle="collapse" [attr.aria-controls]="itemType.id" [attr.data-target]="'#'+itemType.id" (click)="toggleCollapse()">
    <span>{{itemType.name}}</span>
    <span class="win-icon" [ngClass]="collapse == 'open' ? 'win-icon-ChevronDown':'win-icon-ChevronLeft'"></span>
</a>

<ul [id]="itemType.id" data-toggle="buttons">
    <li class="btn" routerLinkActive="active">
        <input type="radio">
            <span (click)="...">
                item 1
            </span>
    </li>
    [...]
</ul>

在“我的组件”中：

public collapse: string = "closed";

public toggleCollapse() {
    this.collapse = this.collapse == "open" ? 'closed' : 'open';
}

Answer 1

使用this.collable切换将更改所有项的状态。相反，您可以在itemType中使用temp属性，如itemType.Collable。并且，循环主数组使其折叠属性为true，以便在打开当前项时折叠所有其他项。

<a data-toggle="collapse" [attr.aria-controls]="itemType.id" [attr.data-target]="'#'+itemType.id"
    (click)="toggleCollapse(itemType, itemsArr)">
     <span>{{itemType.name}}</span>
     <span class="win-icon" [ngClass]="!itemType.collapse ? 'win-icon-ChevronDown':'win-icon-ChevronLeft'"></span>

null

在组件中：

public toggleCollapse(itemType, itemsArr) {
    itemsArr.forEach((itemType) => {itemType.collapse = true; }); // for making all other items collapsed when the current one is opened
    itemType.collapse = !itemType.collapse;
}