Question

它在第一次加载后工作，我需要知道如何在不先加载数据的情况下提供阻止数据映射的承诺。在首次加载网站时，它会显示以下错误。我认为这是因为在尝试映射之前不允许从数据库中收集数据？

控制台错误

DashboardComponent_Host.html：1 ERROR TypeError：无法在DashboardComponent.webpackJsonp ... / .. / .. / .. / .. / src / app / dashboard / dashboard.component.ts中读取未定义的属性'map'
的.DashboardComponent.populateDashboard（dashboard.component.ts：70）

对于上下文，第70行是this.goalsLength，例如第一行调用db。

TS文件

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;
    });

服务

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

正如错误消息所述，您愿意从所有服务函数返回FirebaseListObservable并从组件中订阅它们，但当null没有时，服务函数将返回this.userId不存在或未设置。

发生这种情况的原因是您以异步方式设置this.userId（this.afAuth.authState.subscribe）。

确保所有分支都返回Observable，例如：

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

Angular和firebase - 第一次加载时无法映射未定义

1 个答案: