Angular -Боковая панель навигации, переключение данных сворачивается для всех подменю

Question

Я создал боковую панель навигации с подменю. Есть главы и в каждой главе упражнение. Главы выпадают, и даже упражнения внутри глав выпадают. Но если я щелкну любую главу, откроется раскрывающийся список всех глав, если я нажму любую главу, все остальные главы свернутся.

<div class="wrapper sidbr">
    <!-- Sidebar -->
    <nav id="sidebar">
        <ul class="list-unstyled components">
            <li *ngFor="let Chap of mchapter" class="active">
                <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">{{Chap.Chapter}}</a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li *ngFor="let Les of Chap.Lesson">
                        <a href="#">{{Les}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

Answer 1

Здесь правильная ссылка не проходит в подменю, попробуйте вот так

<div class="wrapper sidbr">
    <!-- Sidebar -->
    <nav id="sidebar">
        <ul class="list-unstyled components">
            <li *ngFor="let Chap of mchapter" class="active">
                <a href="#homeSubmenu-{{Chap.Chapter}}" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">{{Chap.Chapter}}</a>
                <ul class="collapse list-unstyled" id="homeSubmenu-{{Chap.Chapter}}">
                    <li *ngFor="let Les of Chap.Lesson">
                        <a href="#">{{Les}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>