は未定義の「電子メール」を読むことができませんAngular＆Firebase

Question

現在のユーザを私のアプリケーションにログインさせてヘッダに表示することに問題があります。私はAngular 4とFirebaseを使用しています。

私はそれを一度表示することができましたが、私はいくつかの変更を加えましたが、今修正する方法はわかりません。

私は入れませんエラーは、この

error typeerror: cannot read property 'email' of undefined

Header.component.htmlことです：

<li class="nav-item dropdown" dropdown (onToggle)="toggled($event)"> 
    <span>{{user?.profile.email}}</span> 

Header.component.ts：

import {Component, OnInit, Input, OnDestroy} from '@angular/core'; 
import {AuthService} from "../pages/login/auth.service"; 
import {auditTime} from "rxjs/operator/auditTime"; 
import {User} from "../pages/users/user"; 
import {Router} from "@angular/router"; 
import {FirebaseAuthState} from "angularfire2"; 
import {Subscription} from "rxjs"; 

export class FullLayoutComponent implements OnInit, OnDestroy { 



@Component({ 
    selector: 'app-dashboard', 
    templateUrl: './full-layout.component.html' 
@Input() 
    title : string; 

    user: User; 

    logoutSub: Subscription; 
    currentUserSub: Subscription; 

    constructor(private auth: AuthService, 
       private router: Router) {} 



    ngOnInit() { 
    this.currentUserSub = this.auth.currentUser().subscribe(user => { 
     this.user = user; 
    }) 
    } 

    ngOnDestroy(){ 
    if(this.logoutSub){ 
     this.logoutSub.unsubscribe(); 
    } 
    if(this.currentUserSub){ 
     this.currentUserSub.unsubscribe(); 
    } 
    } 

マイauth.service。 ts

import { Injectable } from '@angular/core'; 
import {AngularFire, FirebaseAuthState} from "angularfire2"; 
import {Observable, ReplaySubject} from "rxjs"; 
import {User} from "../users/user"; 
import {UserService} from "../users/user.service"; 

@Injectable() 
export class AuthService { 
    constructor(private af : AngularFire, 
       private userService: UserService) {} 

    login(email, password) : Observable<FirebaseAuthState>{ 
    let promise = <Promise<FirebaseAuthState>> this.af.auth.login({ 
     email: email, 
     password: password, 
    }); 
    return Observable.fromPromise(promise); 
    } 

    currentUser() : Observable<User>{ 
    return this.af.auth 
     .switchMap((authState: FirebaseAuthState) => authState ? 
     this.userService.getUser(authState.uid) : 
     Observable.of(null)); 
    } 

    isAuthenticated(roles: string[]) : Observable<boolean>{ 
    return this.currentUser() 
     .switchMap(user => 
     roles ? 
     Observable.of(!!user && roles.indexOf(user.role.name) > -1) : 
     Observable.of(!!user) 

    ); 
    } 

user.ts

import {Profile} from "./profile"; 
import {Role} from "../roles/role"; 
export class User{ 
    $key : string; 
    password:string; 
    confirmPassword: string; 
    profile: Profile; 
    role: Role; 
} 

profile.ts

export class Profile{ 
    displayName : string; 
    email: string; 
    username: string; 
} 

Answer 1

私は、エラーが同じであるだけで、それをチェックするためのコンポーネントでプロファイルクラスを含めて初期化しようとするだろう：

import {User} from "../pages/users/user"; 
import {Profile } from "../pages/users/profile"; 

... 

export class AuthService { 
    user: User; 
    user.profile = Profile ; 

私の推測では、これはあなたの現在の喧騒から今外に出るでしょう

Answer 2

ヘッダーコンポーネントでユーザーを初期化している可能性があります。

p:Profile={ 
displayName:'', 
email:'', 
userName:'', 
} 
user:User={ 
$key : '', 
    password:'', 
    confirmPassword: '', 
    profile: p, 
    role: '' 
}