多级推菜菜单Angular 4

Question

我尝试使用Angular 4组件中的多级推菜菜单，但是当使用时在 *ngfor
像这样

@{
    ViewData["Title"] = "Home Page";
}
<link rel="stylesheet" type="text/css" href="~/dist/Menu/demo.css" />
<link rel="stylesheet" type="text/css" href="~/dist/Menu/icons.css" />
<link rel="stylesheet" type="text/css" href="~/dist/Menu/component.css" />
<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/main-client.js" asp-append-version="true"></script>
        <script src="~/dist/Menu/classie.js" asp-append-version="true"></script>
                <script src="~/dist/Menu/mlpushmenu.js" asp-append-version="true"></script>
                <script src="~/dist/Menu/modernizr.custom.js" asp-append-version="true"></script>

    <script>
            new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
    </script>
}

     constructor(private remoteService: RemoteService,@Inject('BASE_URL') baseUrl: string) {


          this.remoteService.filter(baseUrl).then(result => {
            this.item = result.items;
        });}

    <nav id="mp-menu" class="mp-menu">
        <div class="mp-level">
            <h2 class="icon icon-world">All Categories</h2>
            <ul>
                <li *ngFor="let user of item" class="icon icon-arrow-left">
                    <a class="icon icon-display" href="#">Devices</a>
                    <div class="mp-level">
                        <h2 class="icon icon-display">Devices</h2>
                        <a class="mp-back" href="#">back</a>
                        <ul>
                            <li class="icon icon-arrow-left">
                                <a class="icon icon-phone" href="#">Mobile Phones</a>
                                <div class="mp-level">
                                    <h2>Mobile Phones</h2>
                                    <a class="mp-back" href="#">back</a>
                                    <ul>
                                        <li><a href="#">Super Smart Phone</a></li>
                                        <li><a href="#">Thin Magic Mobile</a></li>
                                        <li><a href="#">Performance Crusher</a></li>
                                        <li><a href="#">Futuristic Experience</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>

</ul>
    </div>
</nav>

链接不进入下一个级别：（

和

<a class="icon icon-display" href="#">Devices</a>

按正常链接工作，转到＃链接

我尝试了地图并在Angular HTTP中订阅，但它是相同的erorr

但是，当我使用静态数组而不是像这样的远程服务

时

    <nav id="mp-menu" class="mp-menu">
        <div class="mp-level">
            <h2 class="icon icon-world">All Categories</h2>
            <ul>
                <li *ngFor="let user of [1,2,3]" class="icon icon-arrow-left">
                    <a class="icon icon-display" href="#">Devices</a>
                    <div class="mp-level">
                        <h2 class="icon icon-display">Devices</h2>
                        <a class="mp-back" href="#">back</a>
                        <ul>
                            <li class="icon icon-arrow-left">
                                <a class="icon icon-phone" href="#">Mobile Phones</a>
                                <div class="mp-level">
                                    <h2>Mobile Phones</h2>
                                    <a class="mp-back" href="#">back</a>
                                    <ul>
                                        <li><a href="#">Super Smart Phone</a></li>
                                        <li><a href="#">Thin Magic Mobile</a></li>
                                        <li><a href="#">Performance Crusher</a></li>
                                        <li><a href="#">Futuristic Experience</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>

</ul>
    </div>
</nav>

它有效，将达到一个新的水平， 像这样

任何身体都可以帮助我使用Angular

Answer 1

这是因为在从服务器接收到响应之前， item 分配了任何数据。

尝试使用： <li *ngIf="item" *ngFor="let user of item" class="icon icon-arrow-left">

Answer 2

您可以尝试" ngx-multi-level-push-menu"。

只需在此处遵循描述：https://www.npmjs.com/package/@ramiz4/ngx-multi-level-push-menu