2016-11-10 164 views
0

我创建了一个小项目,其中菜单和它的子菜单是从服务生成的。子菜单在主菜单被点击时第一次加载,但下一次不加载。菜单和子菜单生成问题

app.component.html:

<li class="treeview" *ngFor="let menu of menus"> 
    <a href="#" *ngIf="menu.ParentMenuId === 0"> 
     <i class="fa fa-book"></i> <span>{{menu.Menu}}</span> 
     <span class="pull-right-container"> 
      <i class="fa fa-angle-left pull-right"></i> 
     </span> 
    </a> 
    <ul class="treeview-menu" *ngFor="let submenu of menus"> 
     <li *ngIf="submenu.ParentMenuId === menu.Id"><a routerLink="{{submenu.htmlId}}"><i class="fa fa-circle-o"></i> {{submenu.Menu}}</a></li> 
    </ul> 
</li> 

app.component.ts:

import { MenuService } from './services/menu.service'; 
... 
export class AppComponent { 
    menus: any; 
    constructor(_menuService: MenuService) { 
    _menuService.getMenu().subscribe(menus => this.menus = menus); 
    console.log(this.menus); 
    } 
} 

menu.service.ts:

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

import { Global } from '../app.globals'; 

@Injectable() 
export class MenuService { 

    constructor(private http: Http) { } 

    _data: any; 

    getMenu() { 
    return this.http 
     .get(Global.BASE_API_URL+'/api/menus/get/all') 
     .map(x => x.json()) 
    } 
} 

和JSON是

[ 
    { 
    "Menu": "Master", 
    "ParentMenuId": 0, 
    "htmlId": "master", 
    "Id": 1, 
    "Code": null, 
    "IsActive": true, 
    "EnteredBy": 0, 
    "EnteredDate": null, 
    "UpdatedBy": null, 
    "UpdatedDate": null 
    }, 
    { 
    "Menu": "Entity", 
    "ParentMenuId": 1, 
    "htmlId": "entity", 
    "Id": 2, 
    "Code": null, 
    "IsActive": true, 
    "EnteredBy": 0, 
    "EnteredDate": null, 
    "UpdatedBy": null, 
    "UpdatedDate": null 
    }, 
    { 
    "Menu": "Entries", 
    "ParentMenuId": 0, 
    "htmlId": "entries", 
    "Id": 3, 
    "Code": null, 
    "IsActive": true, 
    "EnteredBy": 0, 
    "EnteredDate": null, 
    "UpdatedBy": null, 
    "UpdatedDate": null 
    }, 
    { 
    "Menu": "Register", 
    "ParentMenuId": 3, 
    "htmlId": "register", 
    "Id": 4, 
    "Code": null, 
    "IsActive": true, 
    "EnteredBy": 0, 
    "EnteredDate": null, 
    "UpdatedBy": null, 
    "UpdatedDate": null 
    }, 
    { 
    "Menu": "Patient", 
    "ParentMenuId": 3, 
    "htmlId": "patient", 
    "Id": 5, 
    "Code": null, 
    "IsActive": true, 
    "EnteredBy": 0, 
    "EnteredDate": null, 
    "UpdatedBy": null, 
    "UpdatedDate": null 
    } 
] 

这里是问题:

enter image description here

任何意见将是有益的。谢谢。

回答

0

我认为有在你的代码中的一些其他问题,因为你的MenuService实例应该在生命周期中产生的只有一次,如果它得到再次产生,那么你可能会从它那里得到空首先编辑constructor(private _menuService: MenuService)的,虽然这是不准确问题,但你可以通过菜单服务的构造函数console.log挖掘它是单身人士