Свернуть / развернуть значок каретки, изменяющий все элементы вместо одного

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.collapse изменит состояние всех элементов. Вместо этого вы можете использовать временное свойство в itemType, например, itemType.collapse. И зацикливание основного массива, чтобы сделать его свойство свернутым истинным, для свертывания всех других элементов при открытии текущего.

<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>

В компоненте:

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;
}