navbar에서 사용자 이미지를 업데이트하는 방법 (각도)

Question

* navbar (아래 코드)를 설정 한 후 * ngIf = "user"로 설정하면 navbar에 사용자 아바타를 표시하려고하지만 해당 자리 표시자를 표시하려고합니다. 페이지를 새로 고친 후 사용자 아바타를 얻습니다. 그래서 로그인 버튼을 클릭 한 후 navbar 만 새로 고칠 수 있는지 궁금합니다. 여기

<nav class="navbar navbar-expand-lg navbar-dark bg-primary"> 
<ul class="navbar-nav navbar-right"> 
    <li *ngIf="!authService.loggedIn()" class="nav-item" [routerLinkActive] = "['active']" [routerLinkActiveOptions] = "{exact:true}"> 
     <a class="nav-link" [routerLink]="['/register']">Register</a> 
    </li> 
    <li *ngIf="!authService.loggedIn()" class="nav-item" [routerLinkActive] = "['active']" [routerLinkActiveOptions] = "{exact:true}" > 
     <a class="nav-link"[routerLink]="['/login']">Login</a> 
    </li> 
    <li *ngIf="authService.loggedIn()" class="nav-item avatar dropdown" style="cursor:pointer"> 
     <a class="nav-link dropdown-toggle waves-effect waves-light" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 

     <img *ngIf="user" src="{{user.avatar}}" style="border-radius:15px; height:35px; width:35px;"> 
     <img *ngIf="!user" src="http://res.cloudinary.com/dk34qvajk/image/upload/v1513190129/placeholder.png" style="border-radius:15px; height:35px; width:35px;"> 
     </a> 
     <div class="dropdown-menu dropdown-menu-right dropdown-purple" aria-labelledby="navbarDropdownMenuLink-5"> 
      <a class="dropdown-item waves-effect waves-light" [routerLink]="['/profile']">Profile</a> 
      <a class="dropdown-item waves-effect waves-light" [routerLinkActive]="['active']" [routerLink]="['/dashboard']">Dashboard</a> 
      <a class="dropdown-item waves-effect waves-light" [routerLinkActive] = "['active']" [routerLinkActiveOptions] = "{exact:true}" (click)="onLogoutClick()" >Logout</a> 
     </div> 
    </li> 
    </ul> 
</nav> 

UPD

는

import { Component, OnInit } from '@angular/core'; 
import { AuthService } from '../../services/auth.service'; 
import { Router } from '@angular/router'; 
import { FlashMessagesService } from 'angular2-flash-messages'; 

@Component({ 
selector: 'app-navbar', 
templateUrl: './navbar.component.html', 
styleUrls: ['./navbar.component.css'] 
}) 
export class NavbarComponent implements OnInit { 

user: Object; 

    constructor(private authService:AuthService, private router:Router, private flashMessage:FlashMessagesService) { } 

//added onInit body to get user object in navbar 

ngOnInit() { 
    this.authService.getProfile().subscribe(profile=>{ 
    this.user = profile.user; 
    }, 
    err=>{ 
    console.log(err); 
    return false; 
    }); 
} 

onLogoutClick(){ 
    this.authService.logout(); 
    this.flashMessage.show('You are logged out', {cssClass: 'alert-success', timeout: 3000 }); 
    this.router.navigate(['/login']); 
    return false; 
} 
} 

navbar.component.ts이며, 지금 여기에 또한 좀있어 auth.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Headers } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { tokenNotExpired } from 'angular2-jwt' 

@Injectable() 
export class AuthService { 
    authToken : any; 
    user : any; 

    constructor(private http:Http) { } 

    registerUser(user){ 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    return this.http.post('http://localhost:17696/signup', user, {headers:headers}) 
     .map(res => res.json()) 
    } 

    authenticateUser(user){ 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    return this.http.post('http://localhost:17696/signin', user, {headers:headers}) 
     .map(res => res.json()) 
    } 

    getProfile(){ 
    let headers = new Headers(); 
    this.loadToken(); 
    headers.append('Authorization', this.authToken) 
    headers.append('Content-Type', 'application/json'); 
    return this.http.get('http://localhost:17696/users/profile', {headers:headers}) 
     .map(res => res.json()) 
    } 

    storeUserData(token, user){ 
    localStorage.setItem('id_token', token); 
    localStorage.setItem('user', JSON.stringify(user)); //cause local storage can store only strings not objects 
    this.authToken = token; 
    this.user =user; 
    } 

    loadToken(){ 
    const token = localStorage.getItem('id_token'); 
    this.authToken = token; 
    } 

    loggedIn(){ 
    return tokenNotExpired('id_token'); 
    } 

    logout(){ 
    this.authToken = null; 
    this.user = null; 
    localStorage.clear(); 
    } 
} 

입니다 과 같은 오류 (navba 초기화 중 프로필을 가져 오는 중 오류가 발생 함) r 구성 요소)

Answer 1

문제는 async가 누락되었습니다.

* ngIf = "사용자 | 비동기"

또한 당신이 안전 네비게이터 연산자를 사용할 수 있습니다 '를?'

{{사용자? .avatar}}

이 시도하고 그것은 당신의 구성 요소 코드를 업로드하지 않는 경우 더 나은 볼 수 있습니다.

<nav ngIf="!Hide" class="navbar navbar-expand-lg navbar-dark bg-primary"> 
seu código 
</nav> 

로그인 버튼을 클릭하면 페이지의 변경하지 않을 경우

Answer 2

`:! 세트를 숨기기에 숨기기를 설정 한 후 숨길 숨기고.

hide = true; 
hide = false; 

당신이 페이지의 변경됩니다 경우 :

나는 포스트