角と火災基地 - 最初の負荷で未定義のマップを作成できません

Question

最初の負荷の後で動作します。最初に負荷をかけずにデータのマッピングを防ぐ方法を知っておく必要があります。サイトの最初の読み込み時に、以下のエラーが表示されます。私はそれをマップしようとする前にデータベースからのデータの収集を許可しないことが原因だと思う？コンテキストについて

コンソールエラー

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

ライン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を返すために喜んでいると、コンポーネントからそれらをサブスクライブしますが、サービス機能がますthis.userIdが存在しないか、または設定されていない場合、nullを返します。。

this.userIdを非同期（this.afAuth.authState.subscribe）に設定しているためです。

ただ、すべての分岐が、例えば、Observableを返してください：応答のための

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