Question

我遇到的问题是让当前用户登录我的应用并将其显示在标题中。我使用的是Angular 4和Firebase。

我设法显示一次，但后来我做了一些更改，现在我无法弄清楚如何修复它。

我不断得到的错误是这个

错误类型错误：无法读取属性＆＃39;电子邮件＆＃39;未定义的

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

可能正在初始化标头组件上的用户可能有所帮助。

AWT thread

无法阅读财产＆＃39;电子邮件＆＃39;未定义的角度和角度火力地堡

1 个答案: