我是Angular的新手，所以请耐心等待 .

我想从firebase firestore获取当前登录用户的firstName，并在仪表板页面上显示它 . 但是当我尝试加载仪表板时，出现以下错误：

AdminOverviewComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'firstName' of undefined

at AdminOverviewComponent.push../src/app/admin/admin-overview/admin-overview.component.ts.AdminOverviewComponent.ngOnInit (admin-overview.component.ts:19)

at checkAndUpdateDirectiveInline (core.js:10097)

at checkAndUpdateNodeInline (core.js:11363)

at checkAndUpdateNode (core.js:11325)

at debugCheckAndUpdateNode (core.js:11962)

at debugCheckDirectivesFn (core.js:11922)

at Object.eval [as updateDirectives] (AdminOverviewComponent_Host.ngfactory.js? [sm]:1)

at Object.debugUpdateDirectives [as updateDirectives] (core.js:11914)

at checkAndUpdateView (core.js:11307)

at callViewAction (core.js:11548)

出现此错误后，将从firebase中检索firstName(因为我是console.log) . 我知道页面加载时，由于滞后提取，firstName为null，但是如何解决这个问题或者最好的方法是什么？

相关的HTML代码：

{{user}}

admin-overview-component.ts

import { Component, OnInit } from '@angular/core';

import { AuthService } from '../../services/auth.service';

import { UserService } from '../../services/user.service';

@Component({

selector: 'app-admin-overview',

templateUrl: './admin-overview.component.html',

styleUrls: ['./admin-overview.component.css']

})

export class AdminOverviewComponent implements OnInit {

user: string;

constructor(private authService: AuthService, private userService: UserService) {

}

ngOnInit() {

this.user = this.userService.userInfo.firstName;

}

logoutUser() {

this.authService.logout()

}

}

user.service.ts

import { Injectable } from '@angular/core';

import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';

import { AuthService } from './auth.service';

export class UserInfo {

Country: string;

age: string;

firstName: string;

lastName: string;

}

@Injectable()

export class UserService {

private userDoc: AngularFirestoreDocument;

public userInfo: UserInfo;

public gotData: boolean;

constructor(private db: AngularFirestore,private authService: AuthService) {

this.userDoc = db.doc('users/' + authService.getUserUID);

this.userDoc.valueChanges()

.take(1)

.subscribe(user => {

if (user) {

this.userInfo = user;

this.gotData = true;

console.log("Got Data: " + user.firstName);

}

else {

this.userInfo = null;

}

})

}

}