2017-12-27 194 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

多個模板綁定和我嘗試,但他們在 及其同 –