Tabs切换回不工作* ngIf或Oder隐藏

Question

我用原生的html和css创建了选项卡，我想用* ngIf在特定用户登录时禁用某些选项卡。目前，我无法在单击下一个选项卡后切换回来，并将我转到我的应用程序的起始站点。我做错了什么？

HTML标签

<div class="col-lg-8 bhoechie-tab-menu"> 
     <div class="list-group" (click)="callMap();"> 
      <a href="#" class="list-group-item text-center active " *ngIf="username == 'admin'> 
      <h4 class="glyphicon glyphicon-globe"></h4> 
      <br/>Test1 
      </a> 
      <a href="#" class="list-group-item text-center " > 
      <h4 class="glyphicon glyphicon-eye-open" ></h4> 
      <br/>Test2 
      </a> 
      <a href="#" class="list-group-item text-center" > 
      <h4 class="glyphicon glyphicon-dashboard"></h4> 
      <br/>Test3 
      </a> 
     </div> 
    </div> 

<div class="col-lg-12 " > 
    <div class="bhoechie-tab"> 
     <div class="bhoechie-tab-content active " > 
     <p>Test 
     </p> 
     </div> 
    </div> 
</div> 
<div class="col-lg-12 bewerten" > 
<div class="bhoechie-tab"> 
    <div class="bhoechie-tab-content "> 
<p>Test2<p> 
    </div> 
</div> 
</div> 

CSS

/* Sidebar Styles */ 

.sidebar-nav { 
    position: fixed; 
    top: 0; 
    width: 240px; 
    padding: 0; 
    list-style: none; 
    height:100%; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px; 

} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #4d4d4d; 
; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #fff; 
    background: rgba(255,255,255,0.2); 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    font-size: 18px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 



div.bhoechie-tab-menu{ 
    padding-right: 0; 
    padding-left: 0; 
    padding-bottom: 0; 
} 
div.bhoechie-tab-menu div.list-group{ 
    /*margin-bottom: 0;*/ 
} 
div.bhoechie-tab-menu div.list-group>a{ 
    /*margin-bottom: 0;*/ 
} 
div.bhoechie-tab-menu div.list-group>a .glyphicon, 
div.bhoechie-tab-menu div.list-group>a .fa { 
    color: #FF7F50; 
} 
div.bhoechie-tab-menu div.list-group>a:first-child{ 
    border-top-right-radius: 0; 
    -moz-border-top-right-radius: 0; 
} 
div.bhoechie-tab-menu div.list-group>a:last-child{ 
    border-bottom-right-radius: 0; 
    -moz-border-bottom-right-radius: 0; 
} 
div.bhoechie-tab-menu div.list-group>a.active, 
div.bhoechie-tab-menu div.list-group>a.active .glyphicon, 
div.bhoechie-tab-menu div.list-group>a.active .fa{ 
    background-color: #FF7F50; 
    border-color: #FF7F50; 
    color: #ffffff; 
} 
div.bhoechie-tab-menu div.list-group>a.active:after{ 
    content: ''; 
    position: absolute; 
    left: 100%; 
    top: 50%; 
    margin-top: -13px; 
    border-left: 0; 
    border-bottom: 13px solid transparent; 
    border-top: 13px solid transparent; 
    border-left: 10px solid #FF7F50; 
} 

Angular2组件

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { Router } from '@angular/router'; 
import { Http, Headers } from '@angular/http'; 
import {Observable} from 'rxjs/Rx'; 
declare var $: 



@Component({ 
    selector: 'sidebar', 
    styleUrls: ['./sidebar.component.css'], 
    templateUrl: './sidebar.component.html' 
}) 

export class SidebarComponent implements OnInit { 
    map:any; 
username:any; 


constructor(public apiService:APIService, public apiServiceMapEntire:APIGoogleEntireService){} 

ngOnInit(){ 
this.clickedMenu(); 
this.username = JSON.parse(localStorage.getItem('currentUser')).username; 
// console.log(localStorage.getItem('currentUser')); 


} 
} 

Answer 1

的问题你的代码是用户名只能在你的组件的ngOnInit（）中获取。此刻，用户可能还没有登录。

我会做这样的：

模板：

 <a href="#" class="list-group-item text-center active " *ngIf="isAdmin()"> 
     <h4 class="glyphicon glyphicon-globe"></h4> 
     <br/>Test1 
     </a> 

组件：

private isAdmin() { 
    let user = JSON.parse(localStorage.getItem('currentUser')); 
    return user && user.userName === 'admin'; // In that way, I won't have an error if the user is not in localStorage 
}