Angular 7无法读取未定义的属性电子邮件

我只想在标题中显示此登录用户的电子邮件

这是我的授权服务：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from '../interfaces/user';

export interface Form {
  email: string;
  password: string;
}

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private http: HttpClient) { }

  login(login): Observable<boolean> {
    return this.http.post<{ token: string }>(
      'https://megaphone-test.herokuapp.com/api/auth/login',
      login)
      .pipe(
        map(result => {
          localStorage.setItem('access_token', result.token);
          return true;
        })
      );
  }

  getUser(): Observable<User> {
    const token = localStorage.getItem('access_token');
    return this.http.get<User>(
      'https://megaphone-test.herokuapp.com/api/user',
      {
        headers: new HttpHeaders().append('x-access-token', token)
      });
  }

  isAdmin() {
    const token = localStorage.getItem('access_token');
    return this.http.get<User[]>(
      'https://megaphone-test.herokuapp.com/api/user/isAdmin',
      {
        headers: new HttpHeaders().set('x-access-token', token)
      }
    )
      .subscribe(
        res => console.log(res['isAdmin']),
        err => console.log(err)
      );
  }

  logout() {
    localStorage.removeItem('access_token');
  }

  public get loggedIn(): boolean {
    return (localStorage.getItem('access_token') !== null);
  }

}

这是我的模板：

 <div class="header-actions" *ngIf="auth.loggedIn">
        <clr-dropdown>
            <button class="nav-text" clrDropdownTrigger>
                    {{ user.email }}
                <clr-icon shape="caret down"></clr-icon>
            </button>
            <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right"> 
                <a href="..." clrDropdownItem>Preferences</a>
                <a clrDropdownItem (click)="doLogout()">Log out</a>
            </clr-dropdown-menu>
        </clr-dropdown>
    </div>

{{user.email}
注销

错误HeaderComponent.html:17错误类型错误：无法读取未定义的属性“email”

似乎无论我以何种方式编写，它都永远不知道用户是谁。我可以控制台记录它一整天，它显示这个登录用户没有问题

干杯

 ngOnInit() {
    this.auth.getUser()
    .subscribe(
      user => this.user = user['user']
    );
  }

在组件init上：可观察{

 getUser(): Observable<User> {
    const token = localStorage.getItem('access_token');
    return this.http.get<User>(
      'https://megaphone-test.herokuapp.com/api/user',
      {
        headers: new HttpHeaders().append('x-access-token', token)
      }
    );
  }

const token=localStorage.getItem（'access_token'）； 返回this.http.get( 'https://megaphone-test.herokuapp.com/api/user', { headers:new-HttpHeaders（）.append（'x-access-token'，token） } ); }

---

我记得通过console.log进行了调试，虽然它很好地显示了我的数据，但我的程序说它不存在。我相信console.log在异步管道中起到了一定的作用，它可以让您误以为数据是可用的。当视图最初显示时，

user

还不存在。你有没有试过

{{user？.email}

。问题是我的“用户”电子邮件不是可为空的属性。是角度；这与可为空的属性无关。你从中得到了什么？你还有错误吗？@ConnorsFan是对的。组件初始化时，用户将为null。执行

user？.email

将解决您的问题。如果必须这样做，则意味着您在.get（）方法上使用了错误的泛型类型。将其更改为this.http.get，下次请特别注意数据如何从后端返回。

 getUser(): Observable<User> {
    const token = localStorage.getItem('access_token');
    return this.http.get<User>(
      'https://megaphone-test.herokuapp.com/api/user',
      {
        headers: new HttpHeaders().append('x-access-token', token)
      }
    );
  }