标签: angularfire2

如何在Angularfire2 Angular2中对FirebaseListObservable列表进行排序?

我希望从Firebase实时数据库中获取所有用户,并按分数属性对其进行排序.我已经使用变量工作,
users: FirebaseListObservable<any[]>;
但我得到错误:

Type 'Observable<any[]>' is not assignable to type 'FirebaseListObservable<any[]>'.
Property '_ref' is missing in type 'Observable<any[]>'.
Run Code Online (Sandbox Code Playgroud)

如果我将变量更改为
users: Observable<any[]>;
然后错误消失,但我不能使用像.push()和的Angularfire方法.update().

我的提取和排序代码(有效)看起来像:

this.users = this.af.database.list('/users')
  .map(items => items.sort((a, b) => b.score - a.score));
Run Code Online (Sandbox Code Playgroud)

我将不胜感激任何有关如何避免错误或任何首选方式的建议,谢谢!

firebase typescript firebase-realtime-database angularfire2 angular

3
推荐指数
1
解决办法
6173
查看次数

AngularFire2类型:“类型'FirebaseObjectObservable &lt;any&gt;'上不存在属性'take'”

我已经将离子应用程序从beta 11更新为rc0。所以这意味着我已经从打字稿1.8切换到2。

我已经根据此网站配置了AngularFire2 ,Ionic 2 RC0,Firebase 3 + AngularFire 2入门

我有这行代码工作:

this.af.database.object(`comments/${commentId}`).take(1).subscribe({
    data => console.log(data)
});
Run Code Online (Sandbox Code Playgroud)

但是现在得到这个错误

错误TS2339:类型“ FirebaseObjectObservable”上不存在属性“ take”。

有什么想法吗?我该如何解决?

firebase typescript ionic2 angularfire2 angular

3
推荐指数
1
解决办法
3292
查看次数

Firebase Angular2 - 如何在没有太多开销的情况下查询和呈现列表

在我的应用程序中,我有以下firebase帖子结构:

posts: {
    text: ".."
    meta: {..}
    user: {
        id: "user1",
        username: ".."
    }
}
Run Code Online (Sandbox Code Playgroud)

我正在使用angularfire2.因此,要获取特定用户发布的所有帖子,我运行以下查询:

this.userPosts$ = this.af.database.list('/posts', {
    query: {
      orderByChild: 'user/id',
      equalTo: userId
    }
  }).map( (posts) => {
    return posts.map(post => Post.unpack(post));
  }).publishReplay(1).refCount();
Run Code Online (Sandbox Code Playgroud)

我听说它效率不高,因为每次有变化(即使在一个帖子中),整个列表都会被重新加载,从而重新渲染.由于我在我的应用程序中有喜欢和不喜欢,这将经常发生.基本上每当有人喜欢帖子时,如果我没有弄错的话,每个用户都会重新加载整个列表.

我知道有一种方法可以在监听firebase事件时维护列表的本地副本:"child_added","child_removed"和"child_changed".但是,如果我将这些事件附加到查询列表中,则每次原始帖子列表中的某些内容发生更改时,它们都会触发.

所以,我在想这里采取什么方法.我可能会将帖子数据复制到firebase中的"user_posts"列表中,如果它是唯一的好选择.然而,通过这种方法,我觉得查询变得几乎无用,我失去了灵活性.大约一个星期前我开始使用firebase,所以我可能仍会有一些误解.

database firebase firebase-realtime-database angularfire2 angular

3
推荐指数
1
解决办法
2122
查看次数

向Firebase和AngularFire2注册用户

在我的app.component.ts中,我正在使用此功能通过angularFire2将用户注册到Firebase。但是我在类型“ void”上遇到“属性'subscribe'不存在”的错误。

register() {
    this.userService.registerUser(this.model)
        .subscribe(
            data => {
                console.log('Registration successful')
            },
            error => {
                this.loading = false;
            });
}
Run Code Online (Sandbox Code Playgroud)

在我的userService.ts中,我有以下调用从Firebase获取数据

registerUser(user: User) {
    this.angularFire.auth.createUser({
    email: user.email,
    password: user.password
    }).then(
    (success) => {
        console.log(success);
    }).catch(
    (err) => {
        console.log(err);
    })
}
Run Code Online (Sandbox Code Playgroud)

我知道为什么会出现错误。因为我在userService中的registerUse函数不会返回可观察到的结果。当我刚接触Typescript时,如何将其更改为可观察的状态,以便在数据返回时可以在app.component.ts中的console.log('Success')进行操作?

observable firebase typescript angularfire2 angular

3
推荐指数
1
解决办法
3347
查看次数

AngularFire2无限滚动

我正在尝试使用Ionic2和Firebase实现无限滚动.

我使用AngularFire2.我想要做的是将新项添加到提取的列表,而不是重新加载整个列表.

let query$:Observable<any> = this.af.database.list(`quests/`, {
    query: {
        orderByChild: 'date_published',
        limitToFirst: this.recentChunkLimit$ //Subject where I push new limit length
    }
}).publishReplay(1).refCount();
Run Code Online (Sandbox Code Playgroud)

但是,当我查询这样的列表时,每次通过websockets重新加载整个列表,使每次下一次更新变得越来越慢.以下是网络websockets选项卡的屏幕截图: 的WebSockets 而且我注意到每个下一个块的请求都是2次(尽管我放了publishReplay).它发生在我使用AngularFire2的所有应用程序中.我可能会误解一些事情.我当然需要一些澄清.

// ==========编辑============

现在,我以某种方式设法实现我想要的,而不是每次都重新加载整个列表.不是最好的实现,但它的工作原理.基本上,我创建了一个可观察的数组,并通过订阅下一个chunk observable(其中我也得到了最后一个元素)来加载新的值.然而,后来的问题仍然存在 - 在套接字显示中,我获得了2次请求数据.在此输入图像描述

infinite-scroll firebase ionic2 angularfire2 angular

3
推荐指数
1
解决办法
1302
查看次数

如何正确查询AngularFire2中的Firebase列表?

我正在开发一个使用Firebase作为后端的Angular2应用程序.在子页面上,我想显示由route参数指定的给定周的一些任务.

我通过BehaviorSubject以下方式使用a 作为AngularFire2查询的参数:

export class PrepareComponent implements OnInit {

    private routeSub: any;
    weekId = '';

    private weekSubject: BehaviorSubject<any> = new BehaviorSubject('weekId');

    taskTemplates$: FirebaseListObservable<TaskTemplate[]>;

    constructor(private route: ActivatedRoute,
                private router: Router,
                private angularFire: AngularFire) {

        // this.taskTemplates$ = angularFire.database.list("/taskTemplates");
Run Code Online (Sandbox Code Playgroud)

以下是Firebase查询:

        this.taskTemplates$ = angularFire.database.list("/taskTemplates", {
            query: {
                equalTo: this.weekSubject
            }
        });
    }

    ngOnInit() {
        this.routeSub = this.route.params.map(
            (params: Params) => this.weekId = params[ 'weekid' ]
        ).subscribe(
            weekId => this.weekSubject.next(weekId)
        );
    }

    ngOnDestroy() {
        this.routeSub.unsubscribe();
    }
}
Run Code Online (Sandbox Code Playgroud)

不幸的是,Firebase taskTemplates$observable没有返回给定weekId的任何数据.

我假设一旦weekId …

querying observable firebase firebase-realtime-database angularfire2

3
推荐指数
1
解决办法
1万
查看次数

使用CanActivate的AngularFire2(4.0)身份验证无效

我正在构建一个基于以下教程的Angular 4 + FireBase(4.0.0.rc0)应用程序:https://coursetro.com/posts/code/32/Create-a-Full-Angular-Authentication-System-with -Firebase

本教程基于较旧版本的FireBase.我几乎可以所有内容转换为最新版本.我正在努力改变这个canActivate功能.它会引发Observable.from(this.afAuth)以下错误:

[ts]
Argument of type 'AngularFireAuth' is not assignable to parameter of type 'ArrayLike<{}>'.
Property 'length' is missing in type 'AngularFireAuth'.
(property) AuthGuard.afAuth: AngularFireAuth
Run Code Online (Sandbox Code Playgroud)
export class AuthGuard implements CanActivate {

  constructor(private afAuth: AngularFireAuth, private router: Router) { }

  canActivate(): Observable<boolean> {
    return Observable.from(this.afAuth)
      .take(1)
      .map(state => !!state)
      .do(authenticated => {
        if
         (!authenticated) this.router.navigate(['/login']);
      })
  }
}
Run Code Online (Sandbox Code Playgroud)

我怎样才能做到这一点?

谢谢!

firebase firebase-authentication angularfire2 angular

3
推荐指数
1
解决办法
1804
查看次数

angularfire2:未启用Cloud Firestore API

我正在学习在我的项目中实现angularfire2.不幸的是我现在卡住了.我设置了像这里描述的Angular-Project

https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md

我还在firebase中使用规则集设置了一个数据库

{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}
Run Code Online (Sandbox Code Playgroud)

但是,当我尝试在浏览器中的控制台中运行应用程序时,会出现以下错误

错误错误:未为项目启用Cloud Firestore API

现在我找到了一种在这里启用API的方法

https://console.cloud.google.com/apis/library/firestore.googleapis.com/?project=projectname

现在离开我的错误

错误错误:权限丢失或不足

我现在的问题是我可以设置API密钥(但也从我的firebase控制台获得了不同的API密钥?)和OAuths,但我不知道如何实现这些是我的代码.只是简单地生成一个API密钥并在environment.firebase配置中使用该密钥不起作用.如果有人知道任何事情会很棒.我会继续尝试,让你知道我是否也能让它运作起来.

node.js angularjs firebase angularfire2 google-cloud-firestore

3
推荐指数
1
解决办法
3801
查看次数

在Angular5项目中找不到命名空间'firebase'

我试图在angular 5项目中集成angularfire2和firebase,但它给出了'firebase'命名空间错误.

的package.json

{
  "name": "angular5-firebase",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@types/firebase": "^2.4.32",
    "angularfire2": "^5.0.0-rc.4",
    "core-js": "^2.4.1",
    "firebase": "^4.8.1",
    "rxjs": "^5.5.2",
    "typings": "^2.1.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.6.1",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2", …
Run Code Online (Sandbox Code Playgroud)

firebase tsconfig angularfire2 angular

3
推荐指数
1
解决办法
1065
查看次数

取不功能:Angular 7 | Observable.take引发运行时错误

我正在构建购物车,并且使用了购物车服务,在该服务中,我将数量分配给产品/将产品添加到购物车。除了使用take获取可观察项$的第一个实例外,还有其他方法吗?

我正确导入了take运算符,但它始终给我运行时错误。如果我不使用take,那么分配的数量是一些随机整数而不是1。

我在以下代码中的可观察值上使用take()时遇到以下错误:

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Product } from '../app/models/product';
import 'rxjs/add/operator/take';//tried this one too
import { take } from 'rxjs-compat/operator/take';

@Injectable({
  providedIn: 'root'
})
export class ShoppingCartService {

  constructor(private db: AngularFireDatabase) { }

  private create() {
    return this.db.list('/shopping-carts').push({
      dateCreated: new Date().getTime()
    });
  }


  private getCart(cartId: string) {
    return this.db.object('/shopping-carts/' + cartId);
  }
  private async getOrCreateCartId() {
    let cartId = localStorage.getItem('cartId');
    if (cartId) return cartId;

    let result = await …
Run Code Online (Sandbox Code Playgroud)

runtime-error take typescript angularfire2 angular

3
推荐指数
1
解决办法
1488
查看次数