angularfire2 无法读取 null 的 属性 'displayName'

Question

我正在尝试使用 angularfire2 处理身份验证。 angularfire2 document in github 使用 Observable 变量来获取当前用户的名称。在用户未登录的初始状态下，出现Can not read property 'displayName' of null等错误。我很想知道如果您当前未登录该怎么办。

this is my Error Console

这是我的代码

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';

import * as firebase from 'firebase/app';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  user: Observable<firebase.User>;
  items: FirebaseListObservable<any[]>;

  userName: string;

  constructor(public navCtrl: NavController, private afAuth:    AngularFireAuth, private db: AngularFireDatabase) {
    this.user = afAuth.authState;
    this.items = db.list('items');

    this.user.subscribe((user: firebase.User) => {
      this.userName = user.displayName;
      console.log(`[constructor]userName : ${this.userName}`);
    });
  }

  login() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }
  logout() {
     this.afAuth.auth.signOut();
  }
}

Answer 1

如 Firebase documentation 中所述，当前用户是 firebase.User 或 null。我的猜测是没有用户登录，因此当前用户是 null.

尝试用 if 子句包裹它，如下所示：

if (user !== null) {
  this.userName = user.displayName;
  console.log(`[constructor]userName : ${this.userName}`);
}

Answer 2

我找到了一个解决方案：使用 AngularFire2 访问经过身份验证的数据

this.user.subscribe((user: firebase.User) => {
  if(user != null){
    this.userName = user.displayName;
    console.log(`[constructor]userName : ${this.userName}`);
  }
});

他使用if(user != null)来避免面对空错误。

如果您知道这是正确的方法还是比这更好，我将不胜感激。