多级推送菜单角度 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 中订阅，但它的错误相同

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

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

它工作并进入下一个级别 like this

任何机构都可以帮助我使用角度中的多级菜单

Answer 1

这是因为在收到来自服务器的响应之前，html 已经被渲染，并且 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