在首页加载时可观察到的未定义-提供有效和非有效的实现,寻找原因

问题描述 投票:0回答:1

我正在服务构造函数中调用loadUserData()。但是,在首次加载页面时,未定义相关的可观察对象。但是,当我从组件中显式调用load函数时,它可以工作。 请参阅component.ts文件中的两个实现 ngOnInit()。使用app.module.ts中的ModuleWithProviders界面和静态forRoot()提供此服务。 如果我手动导航离开然后返回此页面,则resumeData$可操作。而且我不必从component.ts文件中调用loadUserdata()。我在这里想念什么?

加载数据服务文件

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireAuth } from '@angular/fire/auth';
import { User } from '../model/user.model';
import { ResumeData } from '../model/resumeData.model';
import { Observable, of } from 'rxjs';
import { map, first } from 'rxjs/operators';
import { convertSnaps } from './db-utils';
import { Summary } from '../model/summary.model';
import { Category } from '../model/skill.model';
import { Education } from '../model/education.model';
import { CoreCompetency } from '../model/competency.model';

@Injectable()
export class LoadFirestoreDataService {
  user: firebase.User | null;
  summaryList$: Observable<Summary[]>;
  categoryList$: Observable<Category[]>;
  educationList$: Observable<Education[]>;
  coreCompetencyList$: Observable<CoreCompetency[]>;
  resumeData$: Observable<ResumeData[]>;

  constructor(private db: AngularFirestore, private afAuth: AngularFireAuth) {
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.user = user;
        this.loadUserData();
      } else {
        this.user = null;
      }
    });
  }

  loadUserData(): Observable<ResumeData[]> {
    // console.log(this.user);
    const user = <User>JSON.parse(localStorage.getItem('user'));
    // console.log(userId);
    // if (user.uid) {
    this.resumeData$ = this.db
      .collection('users')
      .doc(user.uid)
      .collection('userData')
      .snapshotChanges()
      .pipe(map(snaps => convertSnaps<ResumeData>(snaps)));

    return this.resumeData$;
  }
}

一个component.ts文件

  ngOnInit() {
// Following does not work
    this.dataService.resumeData$.subscribe(data => {
      console.log(data);
    });
// Following works 
    this.dataService.loadUserData().subscribe(data => {
      console.log(data);
    });

  }
angular typescript rxjs angularfire
1个回答
0
投票

刚发现,即使在成功通过身份验证后,也不从builder()调用loadUserData()。现在寻找原因。

© www.soinside.com 2019 - 2024. All rights reserved.