Question

我有一个使用firebase的角应用程序。该应用程序有两个服务。第一个用于身份验证。它具有当前经过身份验证的用户的可观察性。

import { AngularFireAuth } from 'angularfire2/auth';
import { Injectable } from '@angular/core';
import * as firebase from 'firebase';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthService {

 user$: Observable<firebase.User>;

 constructor(private afAuth: AngularFireAuth) {
   this.user$ = afAuth.authState;
 }

 getUser() {
   console.log(this.user$);
 }

 loginWithEmailAndPassword(email, password) {
   this.afAuth.auth.signInWithEmailAndPassword(email, password);
 }

 loginWithGoogle() {
   this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
 }

 logOut() {
   this.afAuth.auth.signOut();
 }

}

第二个服务包含订阅我的firebsae实时数据库列表的myFokos observable。

import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable()
export class MyListService {

 myFokos: Observable<any[]>;

 constructor(auth: AuthService, database: AngularFireDatabase) {
   auth.user$.subscribe(user => {
     console.log('User is logged in. UID: ' + user.uid);
     this.myFokos = database.list('users/' + user.uid + '/glossaries').snapshotChanges();
   });
 }

}

然后我尝试从MyListService访问myFokos observable。

import { AuthService } from './../../services/auth.service';
import { MyListService } from './../../services/my-list.service';
import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-my-fokos',
 templateUrl: './my-fokos.component.html',
 styleUrls: ['./my-fokos.component.css']
})
export class MyFokosComponent implements OnInit {

 constructor(public myListService: MyListService, public auth: AuthServ

ice) { }

     ngOnInit() {
       this.myListService.myFokos.subscribe(x => {
    console.log(x);
  });
 }

}

当我这样做时，我在控制台中收到错误：

MyFokosComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'subscribe' of undefined
   at MyFokosComponent.ngOnInit (my-fokos.component.ts:15)
   at checkAndUpdateDirectiveInline (core.js:12364)
   at checkAndUpdateNodeInline (core.js:13888)
   at checkAndUpdateNode (core.js:13831)
   at debugCheckAndUpdateNode (core.js:14724)
   at debugCheckDirectivesFn (core.js:14665)
   at Object.eval [as updateDirectives] (MyFokosComponent_Host.ngfactory.js? [sm]:1)
   at Object.debugUpdateDirectives [as updateDirectives] (core.js:14650)
   at checkAndUpdateView (core.js:13797)
   at callViewAction (core.js:14148)

我认为问题是myFokos observable是未定义的，直到MyListService从AuthService获取用户$ observable，但我不知道如何解决它。我试图将用户$和myFokos组合在一起，然后在组件中订阅它，但这不起作用。

当我导航到另一条路线并返回时，我没有收到错误。我也可以像这样从HTML获取数据：

*ngFor="let foko of myListService.myFokos | async"

这个问题不是this question的重复，因为答案是从组件中的数据库中获取数据。我不想在我的应用程序中使用它，因为我在多个组件中使用来自myFokos observable的数据。

Answer 1

您的代码不是纯粹的异步代码：

constructor(auth: AuthService, database: AngularFireDatabase) {
  auth.user$.subscribe(user => {
    console.log('User is logged in. UID: ' + user.uid);
    this.myFokos = database.list('users/' + user.uid + '/glossaries').snapshotChanges();
  });
}

这更容易

constructor(auth: AuthService, database: AngularFireDatabase) {
  this.myFokos$=auth.user$.switchMap(user => {
    console.log('User is logged in. UID: ' + user.uid);
   return database.list('users/' + user.uid + '/glossaries').snapshotChanges();
  });
}

Angular无法订阅firebase list observable

1 个答案: