标签: angularfire2

我在使用AngularFire2的Angular应用程序中有以下代码.

打字稿:

constructor(db: AngularFirestore) {
    this.booksCollectionRef = db.collection<Book>('books');

    this.books = this.booksCollectionRef.snapshotChanges().map(actions => {
        return actions.map(action => {
            const data = action.payload.doc.data() as Book;
            const id = action.payload.doc.id;
            return { id, ...data };
        });
    });
}

HTML:

<md-list>
    <md-list-item *ngFor="let book of books | async">
        <h4 md-line>{{book.name}}</h4>
    </md-list-item>
</md-list>

此代码按预期检索和绑定数据(在更新集合时删除项目),现在我想按给定列对集合进行排序.我试图使用firebase orderBy子句,但我无法弄清楚如何使用它与snapShotChanges()方法.

我有一个Web应用程序(Angular)和移动应用程序(Ionic).它们都共享相同的Firestore数据.

使用Web应用程序更新现有数据但离子应用程序显示重复项目(重新启动移动应用程序后副本将会消失),我在Firestore中检查项目数据本身,它已更新且唯一.有没有人对此有任何线索？

此问题仅发生在除了Web应用程序之外的移动应用程序上,两者都使用 "angularfire2": "^5.0.0-rc.4",

   import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';

   this.posts$ = this.db.getRecentPosts().snapshotChanges().pipe(
      map(arr => arr.map(doc => {
          return { id: doc.payload.doc.id, ...doc.payload.doc.data() }
        }
      ))
    );

是否研究过(似乎并非100%肯定)angularfire2问题: AngularFirestoreCollection有时会在插入新记录后返回记录副本

我正在尝试使用AngularFire 2 auth为示例Angular 2应用程序设置单元测试,该组件非常简单:

import { Component } from '@angular/core';
import { AngularFire, AuthProviders } from 'angularfire2';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  isLoggedIn: boolean;

  constructor(public af: AngularFire) {
    this.af.auth.subscribe(auth => {
      if (auth) {
        this.isLoggedIn = true;
      } else {
        this.isLoggedIn = false;
      }
    });
  }

  loginWithFacebook() {
    this.af.auth.login({
      provider: AuthProviders.Facebook
    });
  }

  logout() {
    this.af.auth.logout();
  }
}

我做的是周围包裹login,并logout在AngularFire方法,所以我想使用一个模拟检查,如果这些方法被称为,但我不知道从哪里开始,我试图做我的spec文件如下:

import { provide } from '@angular/core';
import { …

早上好,

我尝试从这个类中添加一个新创建的对象:

export class Sponsor implements ISponsor {

  title: string;    
  description?: string;
  creation: ICreation;

  constructor(title: string, description: string, author: string) {
     this.title = title;
     this.description = description;
     this.creation = new Creation(author);
  }
}

在我的服务中,create函数看起来像:

createSponsor(sponsor) {
   sponsor.id = this.afs.createId();
   return this.collection.doc(sponsor.id).set(sponsor);
}

当我这样尝试时,我收到以下错误:

FirebaseError:[code = invalid-argument]:函数DocumentReference.set()使用无效数据调用.数据必须是一个对象,但它是:一个自定义的赞助商对象

我该如何解决这个问题？

我想在我的应用程序中使用firebase和angularfire2,首先,我安装它们,并为声明:

在environment.ts

export const environment = {
    production: false,
    firebase: {
    apiKey: 'sfsdfdsff',
    authDomain: 'sfsdfdf',
    databaseURL: 'https://ng-sfsdfsf.firebaseio.com',
    projectId: 'ng-fitnesssfsdfdsf',
    storageBucket: 'ng-fsdfsdfsfdecff5.appspot.com',
   messagingSenderId: '21331323'
   }
  };

在app.module.ts中,导入:

AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule

在想要获取我的数据的组件中:

import { AngularFirestore } from 'angularfire2/firestore';

直到这一刻我没有错误,但是当我想在构造函数中声明我的变量来使用它时:

constructor(private trainingService: TrainingService, private 
db:AngularFirestore) { }

我有一个错误:

ERROR TypeError: Object(...) is not a function
at eval (firestore.js:28)
at ZoneDelegate.invoke (zone.js:388)
at Zone.run (zone.js:138)

在我的package.json中:

"angularfire2": "^5.0.0-rc.8.0",
"core-js": "^2.4.1",
"firebase": "^5.0.2",

我不知道为什么？

谢谢你的帮助

我目前正在使用AngularFire2处理Angular 2项目,我正在尝试将FirebaseListObservable转换为Promise.我知道它没有多大意义,因为Observables更有用,但是这个函数将成为链接多个promise的另一个函数的一部分.而且我不熟悉如何在一系列承诺中订阅Observable ...该函数在服务中执行,但它似乎没有返回任何东西.基本上,我想要做的是检查Firebase列表中是否已存在具有特定名称的对象并返回true或false.

服务

constructor(private _af: AngularFire) { }

nameExists(name: string): Promise<boolean> {

 return this._af.database.list('users')
  .map(users => {

    let exists = false;
    users.forEach(user => {
      if(user.name.toLowerCase() === name.toLowerCase()) {
        console.log('Name already exists!');
        exists = true;
      }
    });
    return exists;
  }).toPromise();
}

零件

constructor(private _usersService: UsersService) { }

check(name) {
 this._usersService.nameExists(name)
  .then(bool => console.log(bool));
}

因此,当匹配时,函数会被执行并且在打印到控制台时似乎正常工作.但是,组件中的console.log()不会被执行.我想从未达到"那么"部分.另外,有没有办法在找到匹配后停止forEach循环？

任何帮助将不胜感激,因为我找不到任何答案.

我们尝试使用google身份验证登录(Firebase/ionic2/angularjs2).我们的代码

 import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
   user: Observable<firebase.User>;
  constructor(public navCtrl: NavController,public afAuth: AngularFireAuth) {
    this.user = afAuth.authState;
  }
  login() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

  logout() {
    this.afAuth.auth.signOut();
  }
}

但我们收到错误:

Error: Uncaught (in promise): Error: No provider for AngularFireAuth!
Error: No provider for AngularFireAuth!

请指导我们在代码中使用的内容.

我有以下错误

模块c的元数据版本不匹配:/..../node_modules/angularfire2/index.d.ts,找到版本4,预期3.

如果我去查看我的package.json,我在版本5.0.0-rc.4上有angularfire2,在4.6.2上有firebase. 详情见屏幕截图

我尝试将angularfire2和firebase的版本更改为以前的版本,但没有任何效果.

有什么建议 ？谢谢.

{
  "name": "twitter-revamped",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "angularfire2": "^5.0.0-rc.4",
    "core-js": "^2.4.1",
    "firebase": "^4.6.2",
    "ng2-semantic-ui": "^0.9.6",
    "rxjs": "<5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.7",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": …

cities: Observable<any>;


this.cities = this.fsProvider.collection('cities').map(cities => {
    return cities.map(city => {
      city.country = this.fsProvider.doc(`countries/${city.country_id}`);
      return city;
    });
});

city包括country信息作为Observable数据.所以,如果我city作为一个传递到另一个页面navParam,只是this.navCtrl.push(AnotherPage, {city: city}),我无法获得国家信息AnotherPage.

我刚刚在这里添加了演示:https://stackblitz.com/edit/ionic-firestore.

欢迎任何想法.

使用ionic3,angularfire2 v5

TypeError:Object(...)不是SwitchMapSubscriber._next上的SwitchMapSubscriber.project(http:// localhost:8100/build/vendor.js:73935:76)的函数(http:// localhost:8100/build/vendor.js:61778:27)在SwitchMapSubscriber.Subscriber.next(http:// localhost:8100/build/vendor.js:20750:18)的RefCountSubscriber.Subscriber._next(http:// localhost:8100/build/vendor.js:20786:26)在Subject.next(http:// localhost:8100/build/vendor)的RefCountSubscriber.Subscriber.next(http:// localhost:8100/build/vendor.js:20750:18). js:23237:25)在ConnectableSubscriber.Subscriber._next(http:// localhost:8100/build/vendor.js:20786:26)的ConnectableSubscriber.Subscriber.next(http:// localhost:8100/build/vendor. js:20750:18)在Asification.observe(http:// localhost:8100/build/vendor.js:51866:50)的AsyncAction.DelaySubscriber.dispatch(http:// localhost:8100/build/vendor.js: 76246:40)

home.ts

TypeError: Object(...) is not a function
    at SwitchMapSubscriber.project (http://localhost:8100/build/vendor.js:73935:76)
    at SwitchMapSubscriber._next (http://localhost:8100/build/vendor.js:61778:27)
    at SwitchMapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
    at RefCountSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26)
    at RefCountSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
    at Subject.next (http://localhost:8100/build/vendor.js:23237:25)
    at ConnectableSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26)
    at ConnectableSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
    at Notification.observe (http://localhost:8100/build/vendor.js:51866:50)
    at AsyncAction.DelaySubscriber.dispatch (http://localhost:8100/build/vendor.js:76246:40)

home.html的 …