标签: angularfire2

显示angularfire2查询中的单个项目

有没有办法在不使用ngFor循环的情况下显示angularfire2的查询?

this.user = this.af.database.list('items',{
  query: {
    orderByChild: 'id',
    equalTo: id
  }
})
Run Code Online (Sandbox Code Playgroud)

我尝试用所有这些输出HTML,但只有循环工作

{{user}}
{{user | async }}

{{user.name}}
{{user.name | async }}

<h1>{{ (user | async)?.name }}</h1>

<ul>
   <li *ngFor="let u of user  | async" >{{u.name}}</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

数据集是

{
  "items" : {
    "id-1" : {
      "id" : 1,
      "name" : "Gambit"
    },
    "id-2" : {
      "id" : 2,
      "name" : "Wolverine"
    }
  },
  "list" : "bob"
}
Run Code Online (Sandbox Code Playgroud)

通过输出json到html来调试angularfire使用很简单,这似乎在angularfire2中不起作用,是否还有另外这样做?

rxjs angularfire2 angular

2
推荐指数
1
解决办法
2130
查看次数

登录后Angularfire2重定向

我正在使用 ionic 2 rc0 和 angular 2,我刚刚添加了 angularfire2 以使用 firebse auth。

我已经完成所有配置和测试(我只看到我的用户登录了 firebase 控制台),但我想在登录后重定向到其他页面。

我的登录代码:

registerUserWithGoogle() {
   console.log('Google');
   this.af.auth.login();
}
Run Code Online (Sandbox Code Playgroud)

我的 Firebase 配置是:

export const myFirebaseAuthConfig = {
   provider: AuthProviders.Google,
   method: AuthMethods.Redirect
};
Run Code Online (Sandbox Code Playgroud)

那么有没有办法在方法 login() 之后重定向?

firebase firebase-authentication ionic2 angularfire2 angular

2
推荐指数
1
解决办法
3949
查看次数

返回promise的AngularFire2方法不适用于fromPromise

我正在开发AngularFire2应用程序,并希望实现基本身份验证.到目前为止,身份验证本身仍然有效,但另外我想在注册时创建用户对象,以便每个用户在数据库中都有一个配置文件.这里的主要问题是AngularFire2服务上的几乎所有方法都返回promises.另一方面,db服务使用observables,firebase.Promise并且和observable 的组合以某种方式不能按预期工作.

所以,例如,这不起作用:

Observable.fromPromise(() => this.auth$.createUser(credentials))
Run Code Online (Sandbox Code Playgroud)

这导致错误说Argument of type 'Promise<FirebaseAuthState>' is not assignable to parameter of type 'Promise<{}>'.

这同样适用set于a上的方法db.object.我不知道如何解决这个问题.

我的想法是与承诺一起工作,但在某些时候我必须从一个观察到一个承诺.这就是我所拥有的:

auth.service.ts

register(credentials: ICredentials): firebase.Promise<FirebaseAuthState> {
  return this.auth$.createUser(credentials)
    .then((response: FirebaseAuthState) => this.userService.createUserEntity(response))
    .then(() => this.postSignIn())
    .catch((error: Error) => this.onError(error));
}
Run Code Online (Sandbox Code Playgroud)

user.service.ts

createUserEntity(response: FirebaseAuthState): Promise<boolean> {
  this.user = this.db.object(`/users/${response.uid}`);

  return this.user
    .take(1)
    .filter((snapshot: Snapshot) => !snapshot.$exists())
    .mergeMap(() => this.createUser(response))
    .toPromise();
}

private createUser(response: FirebaseAuthState): Observable<any> {
  const { email, displayName, photoURL, providerId } = …
Run Code Online (Sandbox Code Playgroud)

javascript firebase rxjs5 angularfire2 angular

2
推荐指数
1
解决办法
625
查看次数

展平/束缚多个嵌套的Firebase可观察对象

我正在尝试使用AngularFire2。我正在查询,下面一切正常。

我想将所有/大多数可观察物合并为一个:

getTournamentWithRounds(key):Observable<Tournament> {

    return this.af.database
        .object(`/tournaments/${key}`)
        .map(tourney => {

            let t = Tournament.fromJson(tourney);

            this.af.database.list('players', {
                query: {
                    orderByChild: 'tournament_key',
                    equalTo: key
                }
            })
            .map(Player.fromJsonList)
            .subscribe(ps => { t.players = ps; });

            this.af.database.list('rounds', {
                query: {
                    orderByChild: 'tournament_key',
                    equalTo: key
                }
            })
            .map(Round.fromJsonList)
            .subscribe(rs => { t.rounds= rs; })

            return t;
        })
  }
Run Code Online (Sandbox Code Playgroud)

我想知道是否可以加入所有可观察对象,并通过一个订阅功能获得输出。

我想知道何时所有初始数据都已加载,并在将其输出到视图之前在控制器中执行其他计算。

另外,如何扩展到每轮比赛?

我对上述代码的扩展为:

...

this.af.database.list('rounds', {
    query: {
        orderByChild: 'tournament_key',
        equalTo: key
    }
})
.map(rounds => {
    return rounds.map((round) => {

        let r = Round.fromJson(round);

        this.af.database.list('matches', …
Run Code Online (Sandbox Code Playgroud)

observable firebase firebase-realtime-database rxjs5 angularfire2

2
推荐指数
1
解决办法
562
查看次数

Firebase:使用AngularFire2更新列表绑定中的项目

根据angularfire2文档,当您不想更新列表中的项目时,可以执行以下操作:

const items = af.database.list('/items');
// to get a key, check the Example app below
items.update('key-of-some-data', { size: newSize });
Run Code Online (Sandbox Code Playgroud)

但是可以更新列表中的项目,而不必像这样指定对象的键值:

items.update('key-of-some-data', item);
Run Code Online (Sandbox Code Playgroud)

angularfire中,可以这样做:

<li ng-repeat="item in list">
<input type="text" ng-model="item.title" ng-change="list.$save(item)" />
</li>
Run Code Online (Sandbox Code Playgroud)

感谢您抽出宝贵时间阅读这个问题:)

firebase angularfire2

2
推荐指数
1
解决办法
4153
查看次数

如何取消 FirebaseObjectObservable 订阅?

我知道在其他情况下,我可以使用 unsubscribe() 关闭 observable,但据我所知 FirebaseObjectObservable 似乎没有该功能。我怎样才能关闭它?

this.rock = this.af.database.object('/rocks/'+ rockKey);
this.rock.subscribe(obj=>{
  console.log("Can't stop the rock");
});
Run Code Online (Sandbox Code Playgroud)

rxjs angularfire2 angular

2
推荐指数
1
解决办法
1415
查看次数

Auth类型不存在属性“ subscribe”

使用下面的代码,我得到了错误Property 'subscribe' does not exist on type Auth。如果我从app.component.ts中删除了整个订阅代码块,那么我没有收到任何错误,但是浏览器直接在主页而非登录页面上打开。在app.component.html的底部,我包括了<router-outlet></router-outlet>

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import { environment } from '../environments/environment';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private isLoggedIn: Boolean;
  private user_displayName: String;
  private user_email: String;

  constructor(private …
Run Code Online (Sandbox Code Playgroud)

firebase firebase-authentication angularfire2 angular

2
推荐指数
1
解决办法
2074
查看次数

AngularFire - 将两个FireStore集合与相同的pushId项组合在一起

我正在使用AngularFire + FireStore开展一些项目.

我的Firestore模型如下所示:

  • 收集1

    • key1 {some data}
    • key2 {some data}
  • 收集2

    • key1 {其他数据}
    • key2 {其他数据}

现在我需要显示列表,其中我有来自第一个集合的一些数据,以及来自另一个集合的一些数据.如何创建这样的列表?

制作两个可观察对象然后合并它似乎毫无意义.

const collection = this.afStore.collection<any>(collectionName);
    return collection.snapshotChanges()
      .map(participants => {
        return participants.map(participant => {
          const data = participant.payload.doc.data();
          const id = participant.payload.doc.id;
          return {id, ...data};
        });
      });
      
Run Code Online (Sandbox Code Playgroud)

我有这个代码,它采用数据+ id,现在我需要使用此id从另一个集合中提取数据,但不知道如何.

typescript angularfire2 angular google-cloud-firestore

2
推荐指数
1
解决办法
2546
查看次数

类型'Observable <{} []>'Ionic Firebase中缺少属性'query'

所以我尝试了Josh Morony关于如何在Ionic中处理Firebase的教程:https://www.joshmorony.com/building-a-crud-ionic-2-application-with-firebase-angularfire/

到目前为止我做了什么:

app.module.ts

  1. 我已经进口AngularFireDatabaseModuleimports.

import { AngularFireDatabaseModule } from 'angularfire2/database';

imports: [ BrowserModule, AngularFireModule.initializeApp(config), AngularFireDatabaseModule


career.ts

  1. 我进口AngularFireDatabase, AngularFireList,注入AngularFireDatabaseconstructor.

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

constructor(public navCtrl: NavController, private database: AngularFireDatabase)


  1. 我还在构造函数之前添加了一个var

companies: AngularFireList<any>;


  1. 最后,我在构造函数中做了这个.

this.companies = this.database.list('/company').valueChanges();


this.companies显示错误.视图加载列表,但问题是仍然有错误,我不知道发生了什么.这是我在鼠标悬停时显示的内容this.companies: 在此输入图像描述

我真的希望你们中的任何人能够向我解释发生了什么以及如何解决这个错误.真的很抱歉,非常感谢你.

observable firebase-realtime-database angularfire2 ionic3

2
推荐指数
1
解决办法
1174
查看次数

AngularFire2-Firebase存储getDownloadURL()-如何返回Firestore的URL

我一直在浏览angularfire2文档,以从存储中检索downloadURl。我希望这里缺少一些简单的东西。

该文档指出:

@Component({
  selector: 'app-root',
  template: `<img [src]="profileUrl | async" />`
})
 export class AppComponent {
   profileUrl: Observable<string | null>;
   constructor(private storage: AngularFireStorage) {
   const ref = this.storage.ref('users/davideast.jpg');
   this.profileUrl = ref.getDownloadURL();
 }
}
Run Code Online (Sandbox Code Playgroud)

但是,一旦我上传了图片,我想以字符串形式返回下载网址以上传到firestore。我需要一个外部服务的下载网址。

我的功能

uploadImage(base64data) {

  const filePath = (`myURL/photo.jpg`);
  const storageRef = firebase.storage().ref();

  var metadata = {
    contentType: 'image',
    cacheControl: "public, max-age=31536000",
  };

  const ref = this.storage.ref(filePath);
  const task = ref.putString(base64data, 'data_url', metadata).then(() => {

    var downloadURL = ref.getDownloadURL();

  })

}
Run Code Online (Sandbox Code Playgroud)

这样可以完美上传图像。不过,我会再喜欢写的下载网址,公司的FireStore。当控制台记录我的“ downloadURL”变量时,我得到以下信息:

PromiseObservable {_isScalar:假的,承诺:Y,调度:未定义}

下载是承诺观察到里面。如何仅将下载URL字符串作为变量?一旦有了,我就可以整理出Firestore更新了。

firebase firebase-storage angularfire2

2
推荐指数
3
解决办法
6393
查看次数