Angular 4 Bootstarp导航栏不能使用动态绑定

Question

我正在使用Angular 4和Bootstrap 3.3。使用静态数据Left Navbar工作正常。但是当我从DB获取菜单项并尝试使用* ngFor Navbar正在加载但崩溃无效。 以下是代码段。

<div id="sidebar-wrapper" >
        <nav id="spy">
            <ul class="sidebar-nav nav" id="side-menu" >

                <li >
                    <a href="#"> Survey<span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#">Event Details</a>
                        </li>
                        <li>
                            <a href="#">Event History</a>
                        </li>
                        <li>
                            <a href="#">Event Summary</a>
                        </li>
                        <li>
                            <a href="#">Notes</a>
                        </li>
                        <li>
                            <a href="#">Back Out</a>
                        </li>
                        <li>
                            <a href="#">Print Form</a>
                        </li>

                    </ul>
                </li>
                <li *ngFor="let menu of navmenuData">
                    <a class="nav-link"
         [routerLink]=""> {{ menu.MenuName }} <span class="fa arrow"></span></a>
                    <ul *ngIf="menu?.children?.length>0"  [ngClass]="{'nav nav-second-level collapse':menu.children.length>0}">
                        <li  *ngFor="let submenu of menu?.children">
                            <a class="nav-link"
         [routerLink]="">{{ submenu.MenuName }}</a>
                        </li>
                    </ul>
                </li>
</ul>
        </nav>
    </div>