在我的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';
}
使用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;
}
