2017-12-27 468 views
0

我尝试在角4部分使用多级按菜单但当* ngFor
使用 这样多层次按菜单角4

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

工作正常链接,并打算到#链接

和我尝试地图和订阅的角度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

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

回答

0

这是因为收到响应之前的HTML是越来越呈现从服务器和条目被分配任何数据。

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

+0

不能有一个元素 –

+0

多个模板绑定和我尝试,但他们在 及其同 –