Angular和Firebase-首次加载时无法映射未定义

Question

It works after the first load, I need to know how to provide a promise to prevent the data mapping without first letting it load. On first load of the site it displays the error below. I think it's cause by not allowing the colleciton of data from the database before trying to map it?

Console error

DashboardComponent_Host.html:1 ERROR TypeError: Cannot read property 'map' of undefined at DashboardComponent.webpackJsonp.../../../../../src/app/dashboard/dashboard.component.ts.DashboardComponent.populateDashboard (dashboard.component.ts:70) at

For context the line 70 is this.goalsLength eg the first line that calls the db.

The TS file

ngOnInit() {
    this.populateDashboard();
  }

  populateDashboard() {
    // just needs a filter on active = if active its not completed. CHANGE IN DB FROM ACTIVE TO COMPLETED
    this.goalsLength = this.progressService.getActiveGoals().map(goals => {
      return goals.length;
    });

    this.visionsLength = this.progressService.getCompletedVisions().map(visions => {
      return visions.length;
    });

    this.opportunitiesLength = this.progressService.getCompletedOpportunities().map(opportunities => {
      return opportunities.length;
    });

    this.actionPlansLength = this.progressService.getCompletedActionPlans().map(actionPlans => {
      return actionPlans.length;
    });

Service

userId: string;
  completedVisions: FirebaseListObservable<VisionItem[]> = null;
  activeGoals: FirebaseListObservable<Goal[]> = null;
  opportunities: FirebaseListObservable<Goal[]> = null;
  actionPlans: FirebaseListObservable<Goal[]> = null;

  constructor(private db: AngularFireDatabase,
              private afAuth: AngularFireAuth) {
    // setting userId returned from auth state to the userId on the service, now we can query
    // currently logged in user, using the id. IMPORTANT
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.userId = user.uid
      }
    });
  }

  // Used to get the dashboard values.
  getCompletedVisions(): FirebaseListObservable<VisionItem[]> {
    if (!this.userId) { return; } // if undefined return null.
    this.completedVisions = this.db.list(`visions/${this.userId}`, {
      query: {
        orderByChild: 'completed',
        equalTo: true
      }
    });
    return this.completedVisions;
  }

  getCompletedOpportunities(): FirebaseListObservable<Goal[]> {
    if (!this.userId) { return }; // if undefined return null.
    this.opportunities = this.db.list(`goals/${this.userId}`, {
      query: {
        orderByChild: 'opportunitiesCompleted',
        equalTo: true
      }
    });
    return this.opportunities;
  }

  getCompletedActionPlans(): FirebaseListObservable<Goal[]> {
    if (!this.userId) { return }; // if undefined return null.
    this.actionPlans = this.db.list(`goals/${this.userId}`, {
      query: {
        orderByChild: 'allActionPlanFieldsCompleted',
        equalTo: true
      }
    });
    return this.actionPlans;
  }



     // Dashboard related queries.
      getActiveGoals(): FirebaseListObservable<Goal[]> {
        if (!this.userId) { return }; // if undefined return null.
        this.activeGoals = this.db.list(`goals/${this.userId}`, {
          query: {
            orderByChild: 'completed',
            equalTo: true
          }
        });
        return this.activeGoals;
      }

Answer 1

Just as the error messages state, you are willing to return FirebaseListObservable from all service functions and subscribing them from component, but service functions will return null when this.userId doesn't exist or unsetted .

The reason this happened is because you are setting this.userId in an asynchronous way( this.afAuth.authState.subscribe ).

Just be sure all branches return Observable , for example:

if (!this.userId) { return Observable.of([]); }   // provide an empty array if userId is not yet ready