ОШИБКА TypeError: Невозможно прочитать свойство 'firstName' из неопределенного

Question

Я новичок в Angular, так что терпите меня.

Я хочу получить firstName текущего пользователя, вошедшего в систему, из firebase firestore и показать его на странице панели инструментов.Но когда я пытаюсь загрузить панель мониторинга, я получаю следующую ошибку:

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)

После этой ошибки firstName извлекается из firebase (потому что я его console.log).Я знаю, что при загрузке страницы firstName имеет значение null из-за задержки, но как мне решить эту проблему или как лучше всего это сделать?

Соответствующий HTML-код:

<button type="button" class="btn btn-rounded btn-dual-secondary" id="page-header-user-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  {{user}}<i class="fa fa-angle-down ml-5"></i>
              </button>

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<UserInfo>;
  public userInfo: UserInfo;
  public gotData: boolean;

  constructor(private db: AngularFirestore,private authService: AuthService) { 
    this.userDoc = db.doc<UserInfo>('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;
      }

    })  
  }

}

Answer 1

<div *ngIf="user"> <button type="button" class="btn btn-rounded btn-dual-secondary" id="page-header-user-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{user}}<i class="fa fa-angle-down ml-5"></i></button> </div>

попробуйте в исходном коде, это может помочь

Answer 2

Вместо того, чтобы объявлять user как переменную, вы можете реализовать ее как средство получения свойства с защитой в случае, если this.userService.userInfo не определено:

get user(): string {
  return this.userService.userInfo ? this.userService.userInfo.firstName : null;
}