Question

我尝试在角度4组件中使用多级推送菜单但是在使用它时在* ng为
像这样

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

作为普通链接工作，转到#link

然后我尝试了地图并订阅了角度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>

它工作并进入下一级和 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

多级推菜单角4

2 个答案: