タブのスイッチバックが* ngで隠されています

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（）の間だけ取得されるということです。現時点では、ユーザーはまだログインしていない可能性があります。

私は次のようにそれを行うだろう：あなたのCSSは、ここで私が思う関係ありません

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 
}