Angular-Side导航栏，所有子菜单的数据切换折叠。

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>