标签: angularfire2

我在Angular Web应用程序中使用AngularFire2.由于Firebase的查询限制,我无法形成完全提供所需数据的查询(至少在没有对我的架构进行重大更改的情况下).

所以我想在javascript(typescript)中应用额外的客户端过滤条件.我该怎么做呢？我可以以某种方式向observable添加过滤函数吗？下面是一个片段,说明了我在做什么.

在组件的HTML模板中,我有类似下面的内容.html片段中的"jobs"变量是FirebaseListObservable.

<tr *ngFor="let job of jobs | async"> 
  .. fill in the table rows

组件代码如下所示:

   // in the member declaration of the class
   jobs : FirebaseListObservable<Job[]>;

   ...
   // Notice in ngOnInit(), I'm filtering the jobs list using the the
   // Firebase criteria. But I want to filter on an additional field. 
   // Firebase allows only single field criteria, so I'm looking for 
   // a way to apply an additional client-side filter to jobs to eliminate
   // some …

我有一个组件,我订阅了一个observable来从Firebase中提取数据.相关的订阅代码类似于:

[ 注意:下面更新/更正的代码.]

// in my component
ngOnInit() {
  // this.af is an injected AngularFire2 instance
  this.tasks = this.af.database.list('/tasks')
    .subscribe(tasks => this.tasks = tasks);
}

必须对用户进行身份验证才能查看此组件,并且我有一个确保这一点的路由防护.

但是,当我注销时,我收到此错误:

客户端无权访问所需数据

我正在退出以下内容:

// this.auth is an injected FirebaseAuth instance
this.auth.logout();
this.router.navigate(['/login']);

在navigate调用路由器方法之前发生错误.问题是我有这个活动任务观察者订阅与一个开放的Web套接字连接,在logout调用该方法之后错误输出,因为用户不再经过身份验证.

任务订阅和注销功能位于我的应用程序的不同部分.如果他们在同一个地方,我想我可以unsubscribe在我退出时调用订阅上的方法.但即便如此,在我的logout方法中坚持使用此订阅取消逻辑似乎很麻烦.我不太清楚如何处理这件事.

如何在注销时取消对任务观察者的订阅？

在Alexander Leonov关于重复分配的评论之后更新了代码

亚历山大指出我this.tasks两次分配给该物业.好点子!这段代码不正确.我没有将订阅分配给一个属性.代码应该如下所示:

ngOnInit() {
  // this.af is an injected AngularFire2 instance
  this.af.database.list('/tasks')
    .subscribe(tasks => this.tasks = tasks);
}

感谢你指出这一点,亚历山大.

解决方案:我最终做了什么

我能够通过Alexander Leonov关于取消订阅ngOnDestroy我的组件的评论来解决这个问题.

在我的任务组件中使用他的代码:

ngOnInit() { …

好吧,所以我一直在撞墙直到半天试图解决这个问题,因为我还没有因为我的知识水平AngularFire2而且Angular2有点初学者.

我有一个应用程序,它使用一个简单的登录表单AngularFire2所连接到Facebook,检索用户Access Token和Facebook Id,然后调用Facebook Graph API返回名字,姓氏,性别,电子邮件等.

如下图所示:

loginWithFacebook(): FirebaseListObservable<string> {

    return FirebaseListObservable.create(obs => {
        this.af.auth.login({
            provider: AuthProviders.Facebook,
            method: AuthMethods.Popup,
            scope: ['public_profile']
        }).then((authState: any) => {

            let authSubscription = this.af.auth.subscribe(auth => {

             if (auth == null) return;

                let url = `https://graph.facebook.com/v2.8/${auth.facebook.uid}?fields=first_name,last_name,gender,email&access_token=${authState.facebook.accessToken}`;

                this.http.get(url).subscribe(response => {
                    let user = response.json()

                    this.af.database.object('/users/' + authState.uid).update({
                        first_name: user.first_name,
                        last_name: user.last_name,
                        display_name: auth.facebook.displayName,
                        gender: user.gender,
                        email_address: auth.facebook.email,
                        accessToken: authState.facebook.accessToken,
                        facebook_Id: auth.facebook.uid,
                    })
                }, …

我正在浏览Firestore文档和指南.我下面的代码示例使用AngularFire2.

让我们考虑类似于此处提供的示例的"聊天"集合:https://firebase.google.com/docs/firestore/manage-data/structure-data

他们推荐这种结构,但我不知道他们在哪里讨论有效地获取所有数据.

每个聊天文档都有属性,成员集合和消息集合:

• chatsCollection
  • chatDocument
    • [在这里插入聊天数据字段]
    • membersCollection
      • memberDocument
        • [在此处插入会员数据字段]
    • messagesCollection
      • messageDocument
        • [在此处插入消息数据字段]

Firestore查询很浅,有时可能很棒.我的理解是,没有编入方式来深入查询并获取嵌套集合.那么,最好的做法和最无忧无虑的方法是什么？

目前我正在检索快照并将快照映射到具有ID的对象,并将嵌套的集合数据添加到父文档数据中,并附加查询和映射,我对我的方法感到不满意,即使使用非规范化的Firebase也可以更快地完成结构.

这个代码示例只是在成员上映射,在消息中添加回来是另一个故事......

getChatsFromFirestore() {
    this.chats = this.dataSvc.getChatsFromFirestore().snapshotChanges()
      .map(chatSnaps => {
        return chatSnaps.map(chat => {
          const chatData = chat.payload.doc.data();
          const chatId = chat.payload.doc.id;
          return this.dataSvc.getMembersForChat(chatId)
            .snapshotChanges()
            .map(memberSnaps => {
              return memberSnaps.map(member => {
                const data = member.payload.doc.data();
                const id = member.payload.doc.id;
                return { id, ...data }
              });
            })
            .map(members => {
              return { chatId, ...chatData, members: members };
            });
        })
      })
      .flatMap(chats => Observable.combineLatest(chats)); …

我有一个像下面这样的异步方法.它[ts] 'await' expression is only allowed within an async function.在这里显示错误await userProfile.set({.你能告诉我怎么解决它吗？

注意:也许是因为我试图在promise里面打电话observable.任何线索？

 async loginWithGoogle(): Promise<void> {
    const result = await this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
    const userId: string = result.uid;
    const userProfile: AngularFirestoreDocument<UserProfile> = this.fireStore.doc(`userProfile/${userId}`);
    const userProfiles: AngularFirestoreCollection<UserProfile> = this.fireStore.collection('userProfile/', ref => ref.where('email', '==', result.email));
    const userProfiles$: Observable<UserProfile[]> = userProfiles.valueChanges();
    userProfiles$.subscribe(res => {
      if (res == null) {
        await userProfile.set({ //here it shows error
          id: userId,
          email: result.email,
          creationTime: moment().format(),
          lastSignInTime: moment().format()
        });
      } …

我正在尝试为我的Angular 6应用添加firebase支持但是在添加angularfire2时

npm install angularfire2 firebase

我得到很多警告说我必须使用Angular 5.例如

npm WARN angularfire2@5.0.0-rc.6.0 requires a peer of @angular/core@^5.0.0 but none is installed. You must install peer dependencies yourself.

今天可以使用angularfire2和Angular 6吗？

编译时出现此错误:

ERROR in node_modules/angularfire2/angularfire2.d.ts(3,10): error TS2305: Module '"/home/rrr/Projects/ng6test/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/angularfire2/firebase.app.module.d.ts(10,22): error TS2720: Class 'FirebaseApp' incorrectly implements class 'FirebaseApp'. Did you mean to extend 'FirebaseApp' and inherit its members as a subclass?
  Property 'automaticDataCollectionEnabled' is missing in type 'FirebaseApp'.
node_modules/rxjs/Subscription.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subscription'.

我试图安装rxjs-compat,但之后又收到了警告

ERROR in …

我正在尝试使用angularfire构建一个ng2应用程序.在快速入门之后,我收到以下错误:

cannot find namespace 'firebase'

似乎是打字的东西,虽然安装了所有这些.有关这个问题的任何想法？

我试图在我的模板中使用一个observable:

<md-nav-list>
    <a md-list-item *ngIf="!isAuth() | async" [routerLink]="['login']" (click)="sidenav.toggle()">Login</a>
    <a md-list-item *ngIf="isAuth() | async" (click)="logout()" (click)="sidenav.toggle()">Logout</a>
</md-nav-list>

在我的模块中:

  isAuth(): Observable<boolean> {
        return this.loginservice.getAuthenticated()
                   .map(user => { if(user){
                                    if(user.hasOwnProperty('uid')){
                                      return true;
                                    } else { 
                                      return false; 
                                    }
                                  } else {
                                    return false;
                                  }
                                })
      }

所以我的问题:

如果我登录并且observable返回true - >很酷我的菜单项出现

但如果observable返回false - >我的菜单是空的 - >什么是错的？

我有一个authService实例化时订阅AngularFireAuth的 ObservableauthState并设置服务的内部（私有）属性authState。

所以我可以在我的测试规范中authService对服务的内部authState进行单元测试，Reflect.get/set以便我可以控制它的价值。

问题当然authService是在实例化期间仍然订阅AngularFireAuth's ObservableauthState，我不想要，也不需要它。

我假设我需要模拟出AngularFireAuth其假货订阅，并不实际沟通火力地堡？单元测试的新手我不知道我应该如何做到这一点。

auth.service.ts

import { Injectable } from '@angular/core';

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class AuthService {
  private authState: firebase.User;

  constructor(private afAuth: AngularFireAuth) { this.init(); }

  private init(): void {
    this.afAuth.authState.subscribe((authState) => {
      if (authState === null) {
        this.afAuth.auth.signInAnonymously() …

我正在按照本教程关于如何将angular与firebase数据库连接起来.但是在第17:30分钟,我收到了这个错误:

'AngularFireList <{}>'类型中不存在属性'subscribe'

我的AppComponent:

import { Component } from '@angular/core';
import {AngularFireDatabase, AngularFireDatabaseModule} from 'angularfire2/database';

import {AngularFireAuth, AngularFireAuthModule} from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';
import { Country } from './models/country';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  countries: any[];

  constructor(db: AngularFireDatabase )
  {
     db.list('/Country/countries')
     .subscribe(countries => { //  <--ERROR IS HERE
      this.countries = countries;
      console.log(this.countries);
      });
  }
}

我的模特:

export class Country {
     // --ATTRIB-- …