【问题标题】:AngularFirestoreCollection snapshotChanges() does not emit value in service constructorAngularFirestoreCollection snapshotChanges() 不在服务构造函数中发出值
【发布时间】:2017-11-07 05:06:18
【问题描述】:

我有一个用户服务,我将添加它来管理我的 firebase cloud firestore beta 服务数据库中的角色。我已经将集合和一些文档添加到数据库中。该服务被注入到另一个方法中,所以我认为服务中的构造函数会触发并加载集合,但是 snapshotChanges() 永远不会发出值,因为数据永远不会记录到控制台,因此永远不会加载集合。

想知道在服务构造函数中运行此代码是否存在问题?

app.module.ts

import { Component } from '@angular/core';
import { AuthService } from './auth.service';
import {UserService} from './user.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private auth: AuthService, router: Router, private userService: UserService) {
    auth.user$.subscribe(user => {
      if (user) {
          const returnUrl = localStorage.getItem('returnUrl');
          router.navigateByUrl(returnUrl);
          userService.getAppUsers();
          userService.addUser(user);
      }
    });
  }

}

user.service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import * as firebase from 'firebase';
import { Observable } from 'rxjs/Observable';

interface AppUser {
  name: string;
  email: string;
  isAdmin: boolean;
}

@Injectable()
export class UserService {
  AppUserCollection: AngularFirestoreCollection<AppUser>;
  AppUsers$: Observable<any[]>;

  constructor(public db: AngularFirestore) {
    this.AppUserCollection = this.db.collection('users');
  }

  getAppUsers() {
    alert("here");
    return this.AppUsers$ = this.AppUserCollection.snapshotChanges()
    .map(actions => {
      alert('there');
      return actions.map(a => {
        const data = a.payload.doc.data() as AppUser;
        console.log('Data' + data);
        const id = a.payload.doc.id;
        return { id, data };
      });
    });
  }
    addUser(user: firebase.User) {
      this.db.collection('users').add({'name': user.displayName, 'email': user.email, 'isAdmin': false});
  }
    // }
}

【问题讨论】:

  • 尝试在router.navigateByUrl(returnUrl)之前添加服务
  • 自己测试一下。代码不多。给出你猜测的解决方案是没有意义的

标签: angular typescript firebase google-cloud-firestore


【解决方案1】:

尝试订阅 this.AppUsers。

this.AppUsers = this.AppUserCollection.snapshotChanges()
    .map(actions => {
    return actions.map(a => {
        const data = a.payload.doc.data() as AppUser;
        console.log('Data' + data);
        const id = a.payload.doc.id;
        return { id, data };
    }).subscribe();

【讨论】:

  • 更新了我的答案。
猜你喜欢
  • 1970-01-01
  • 2016-05-31
  • 1970-01-01
  • 2019-12-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-02-01
  • 1970-01-01
相关资源
最近更新 更多