如何在导航栏Angular中更新用户图像（点击）

Question

我有导航栏（下面的代码） 设置 *ngIf = "user" 后，我尝试在导航栏中显示用户头像，但得到该占位符。刷新页面后，我得到用户头像。所以我想知道如何在单击登录按钮后只刷新导航栏。

<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

这里是 navbar.component.ts

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;
 }
}

现在这里是 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();
  }
}

我也遇到了一些错误，例如 （导致尝试获取有关初始化导航栏组件的配置文件）

Answer 1

问题是缺少异步。

*ngIf="user | async"

你也可以使用安全导航操作符'?'

{{user?.avatar}}

试试这个，如果它没有上传你的组件代码来更好地查看它。

Answer 2

`

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

如果点击登录按钮后不切换页面：设置!hide为隐藏，再设置hide为!hide。

hide = true;
hide = false;

如果你要换页：

location.reload()