Question

我是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代码：

<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>

管理-概述-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

不是将user声明为变量，而是将其实现为属性获取器，并在未定义this.userService.userInfo的情况下提供保护：

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

Answer 2

<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>

在您的原始代码中尝试此操作，这可能会有所帮助

错误TypeError：无法读取未定义的属性“firstName”

2 个答案: