标签: angularfire2

我有一个Firebase数据库.我有Job对象和Item对象.每个作业可以包含许多项目,并且一个项目必须由单个作业(简单一对多)包含.我目前的数据库结构是Item和Job都是firebase中的顶级列表,每个Item包含它所属的jobKey.只要我知道作业密钥,这允许我查找作业中的所有项目.用于查找项目的firebase代码需要一个查询,其中包含项目中jobKey的"orderBy".因此,很容易检索作业的所有项目.但是,我还想根据项目中的其他数据对项目进行排序和过滤.但是由于单个"orderBy"的firebase限制,我无法使用firebase完成第二级过滤.这是我的挑战.我现有数据的结构如下所示.

+--jobs
  |
  +-- jobKey1
  |  |
  |  +-- <jobdata1> ..
  |  
  +-- jobKey2
     |
     +-- <jobdata2>..

+--items
  |
  +-- itemKey1
  |  |
  |  +-- jobKey : jobKey2  // this item belongs to job2
  |  |
  |  +-- <the rest of item1 data
  |  
  +-- itemKey2
  |  |
  |  +-- jobKey : jobKey2  // this item belongs to job2
  |  |
  |  +-- <the rest of item2 data
  |  
  +-- itemKey3
  |  |
  |  +-- jobKey : jobKey1  // this …

首先,抱歉长标题.

我想订阅连续流与数组的forEach从angularfire2,但我也想我已经证实后,第一组数据已经在运行一个函数:

this.people.forEach((person) => {
    person.items = this.database.list('/items' + person.key);
    person.items.subscribe((data) => {person.itemsList = data});
});

myIntendedFunction();

有没有办法myIntendedFunction()这样:

1. 它在data每个收到第一个流之后运行person,并且
2. 它只运行一次？

情况:我正在使用FirebaseObjectObservable来填充我的Ionic 2(rc0)模板.模板代码:

 <p>{{(course | async)?.description}}</p>
 <button ion-button dark full large (click)="openDeckOnBrowser(course.deckUrl)">
  <ion-icon name='cloud-download'></ion-icon>
  <div>View Deck</div>
 </button>

TS文件是

  this.course = this.af.database.object('/bbwLocations/courses/' + courseId); 

this.course是Firebase Object Observable.问题是,这部分不起作用:( click)="openDeckOnBrowser(course.deckUrl).由于course.deckUrl为空.我无法将值传递给函数.

到目前为止,我发现只能使用hacky方式:

 <button id="{{(course | async)?.deckUrl}}" ion-button dark full large (click)="openDeckOnBrowser($event)">
  <ion-icon name='cloud-download'></ion-icon>
  <div id="{{(course | async)?.deckUrl}}">View Deck</div>
</button>

并在点击事件:

  openDeckOnBrowser(event):void {
    console.log(event);
    let target = event.target || event.srcElement || event.currentTarget;
    let idAttr = target.attributes.id;
    let url = idAttr.nodeValue;
    console.log (url);
   }

但任何官方和更容易的方法来解决这个问题？

我搜索了许多论坛,问题,在doc但找不到正确的解决方案.

问题

使用angularfire2增加值的最佳方法是什么？
我看到我们可以使用[transaction()] []但实际上并不适用于angularfire2.还是快照？

user.service.ts

incrementLike(userToIncrementLike){
    this.af.database.object('users/' + userToIncrementLike.uid).subscribe((userObject) => {
      var newUser = {
        likes: userObject.likes + 1
        };

     });
     this.af.database.object('users/' + userToIncrementLike.uid).update(newUser);

  }

我也试过这种方式:

incrementLike(userToIncrementLike){

    let obs = this.af.database.object('users/' + userToIncrementLike.uid);
    obs.subscribe((snapshot) => {
      let newValue = (snapshot.$value) ? (snapshot.$value + 1) : 1;
      obs.set(newValue);
    });
  }

非常感谢你的帮助和提示:)路易斯.

onSubmit(formData) {
if(formData.valid) {
  console.log(formData.value);
  this.af.auth.createUser({
    email: formData.value.email,
    password: formData.value.password
  }).then(
    authState => {
    authState.auth.sendEmailVerification();
    this.router.navigate(['/login'])
  }).catch(
    (err) => {
    console.log(err);
    this.error = err;
  })
}
}

在Firebase中,我设置了SendEmailVerfication上面的代码,电子邮件可以正常发送.但是,在我的应用中,没有点击验证电子邮件的用户与点击的用户之间没有区别,如何有所作为？

我正在开发一个Angular Firebase项目,我需要过滤我的数据库并获取关键值.目前我在我的服务代码中使用valueChanges()方法(在getUnreadBooks和getFavoriteBooks方法中,如下所示)来获取数据并对其进行过滤.但是当我尝试在模板文件中获取键值时,它给我的关键值为'undefined'.我尝试使用snapshotChanges()方法,但无法解决如何使用它来获取键值以及过滤数据.下面是我的Angular FirebaseService,home.component.ts(我在其中注入我的服务代码)和home.component.html(模板文件)代码:

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class FirebaseService {

  books: Observable<any[]>;
  unreadBooks;
  favoriteBooks;

  constructor(private db: AngularFireDatabase) {}

  getBooks(){
        this.books = this.db.list('/books').valueChanges() as Observable<any[]>;
        return this.books;
    }       

  getFavoriteBooks(){
    this.favoriteBooks = this.db.list('/books').valueChanges() as Observable<any[]>;
    this.favoriteBooks = this.favoriteBooks.map(books => {
        const topRatedBooks = books.filter(item =>  item.rate>4);
        return topRatedBooks;
    })
    return this.favoriteBooks;
  }

  getUnreadBooks(){
    this.unreadBooks = this.db.list('/books').valueChanges() …

我无法使用data()DocumentSnapshot上的属性。它在控制台中给我一个错误。这是确切的错误：

auth.service.ts（72,20）：错误TS2339：类型为“可观察”的属性“数据”不存在。

我尝试以多种不同方式获取数据。所有这些技术都是错误。

服务：

constructor(
  private afAuth: AngularFireAuth,
  private afs: AngularFirestore,
  private router: Router,
  public db: AngularFirestore
) {
    this.user = afAuth.authState;

    this.user.subscribe((user) => {
      if (user) {
        this.userDetails = user;
        console.log(this.userDetails);
      } else {
        this.userDetails = null;
      }
    })
}

getUserName() {
  (this.isLoggedIn()){
    const userD = this.db.collection('users').doc(this.userDetails.uid);
    const doc = userD.get();
    return doc.data().firstName;
  } else {
    console.log('user not logged in');
    return "nothing";
  }
}

我正在尝试使用 angularFire 2 在 firebase 中登录并创建帐户。电话登录有一个运行良好的 reCaptcha 字段。使用电子邮件和密码创建帐户也工作正常，但我想在创建表单（如电话登录功能）中使用 reCaptcha，但我没有找到方法，可以在 angularFire 中使用电子邮件和密码创建帐户并使用 reCaptcha 验证。我也尝试过文档，但没有这样的。如果 Angular Fire 2 中有类似的选项，请帮助我。我正在使用"angularfire2": "^4.0.0-rc.1",

我@angular/fire在我的项目中使用 firebase。为了测试与 firebase 服务的集成，我firebase emulators: start在命令行中运行。在为 angular 应用程序提供服务ng serve --open时，每当我进行更改并保存任何文件时，页面都会重新加载，并且我会自动退出 Firebase 帐户。这仅在使用 Firebase 模拟器时发生。我不知道这是否是@angular/firefirebase auth 模拟器的问题。这非常令人沮丧，因为我需要登录 angular 应用程序中的每个文件更改。

我的 App.module.ts 对提供者有以下配置。每当我登录

  providers: [
    {
      provide: USE_AUTH_EMULATOR,
      useValue: environment.useEmulators ? ["localhost", 9099] : undefined,
    },
    {
      provide: USE_DATABASE_EMULATOR,
      useValue: environment.useEmulators ? ["localhost", 9000] : undefined,
    },
    {
      provide: USE_FIRESTORE_EMULATOR,
      useValue: environment.useEmulators ? ["localhost", 8080] : undefined,
    },
    {
      provide: USE_FUNCTIONS_EMULATOR,
      useValue: environment.useEmulators ? ["localhost", 5001] : undefined,
    },
  ],

编辑 1：我通过注入AngularFireAuth …

我想将@angular/fire添加到我的 Nx 工作区（Angular 应用程序）中。

我试图与最佳实践保持一致，但是，官方文档中没有任何关于将此库添加到工作区中的内容。

或者我错过了什么？

1. 安装
   
   • 通过标准命令安装lib可以吗？
     
   • npm i @angular/fire ... 或 ... ng add @angular/fire
     
   • 是否有特定的“Nx 方式”安装它？

2. 放置和命名
   我应该在哪个模块中调用initializeApp()方法？

   • 在应用程序模块中？（在采用 Nx 之前我就是这样做的）

   • 或者一个lib模块？（在我看来这更接近 Nx 哲学）

   • 如果答案是“一个 lib 模块”

     • 应该是哪个模块？
     • 我应该把 lib/module 放在哪里以及我应该给它命名什么？
     • “libs/data-access/api”是个好主意吗？

3. 使用API
   
   • 如何使用已安装的包和初始化的模块（lib）？
   • 我是否应该将 api 库多次导入到需要该功能的每个库中？
   • 或者我只将 api lib 导入到应用程序中一次吗？

如此严格地遵循最佳实践（命名约定等）可能看起来很愚蠢，但我真的想以正确的方式做事。