Question

我正在尝试在Angular 2+的网站标题中显示我的用户头像。应用。我从用户服务中解码的JWT令牌中获取头像，但在我的组件中始终未定义。

这是我的HeaderComponent：

export class HeaderComponent {
  currentAvatar: string;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.currentAvatar = this.userService.getHeader();
    // At this point, currentAvatar is always undefined
  }

我的用户服务：

@Injectable()

export class UserService {

    private avatar: string;

    constructor(private http: HttpClient) {}

    login(username: string, password: string) {
        let headers = new HttpHeaders();
        return this.http.post<any>(this.baseUrl + '/auth/login', { username: username, password: password }, { headers })
            .map(res => {
                let jwtData = res.auth_token.split('.')[1]
                let decodedJwtJsonData = window.atob(jwtData)
                let decodedJwtData = JSON.parse(decodedJwtJsonData)

                this.avatar = decodedJwtData.avatar;
            });
    }

    getHeader(): UserHeader {
        console.log(this.avatar);
        return this.avatar;

    }

}

Answer 1

您正在执行async操作并尝试以sync方式获取数据，这是未定义的原因。

通过订阅登录方法并将头像返回到组件并将其设置为this.currentAvatar

，您最好在登录时获取组件中的数据

Answer 2

由于您的操作是异步的（您试图显示您尚未拥有的头像，因为它来自HTTP POST结果），在您阅读它时，它仍未定义。

你应该返回它的Observable：

getHeader(): Observable<UserHeader> {
    console.log(this.avatar); // undefined here
    return Observable.of(this.avatar);
}

然后订阅这样的观察：

ngOnInit() {
   this.userService.getHeader().subscribe(
      response => this.currentAvatar = response
   );
}

Answer 3

您的“标题”没有关于您服务中this.avatar值的更改的帐户。为实现这一目标，您可以使用getter或订阅更改作为Antonio Ortells的答案

//in your header.component, make a getter
get avatar()
{
    return this.userService.getHeader()
}
constructor (private userService:UserService)
//And in the .html
{{avatar}}

在Angular应用程序的标题中显示用户详细信息

3 个答案: