Question

我正在尝试AngularFire和Ionic。我正在尝试跟着我发现的一些教程，并试图对我正在制作的服务进行建模，这是基于当前AngularFire example from their github.上的示例几乎100％的结果，我遇到的问题是，无论何时我进行收集时，.add（），where（）或snapshotChanges（）之类的方法似乎都不起作用。在我的WebStorm IDE上，它们是红色的，表示方法尚未解决。

我不确定这可能是版本控制还是导入错误，或者只是我在读取错误信息。我已经看到了很多示例项目/教程，而我正在查看的这种特定模式似乎很常见，这使我感到困惑。另外，我只是删除了节点模块并运行了新的npm安装。如果有人可以帮助我/指出正确的方向，那就太好了！谢谢。

以下是一些相关文件：

userservice.ts

import {AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore'
import {Injectable} from "@angular/core";
import 'firebase/storage';
import {Observable} from "rxjs";
import {map} from "rxjs/internal/operators";

/**
 * Created by Ben on 12/26/2018.
 */


export interface User {
  displayName: string;
}
export interface UserId extends User {
  id: string
}


@Injectable()
export class UserService {

  private usersCollection: AngularFirestoreCollection;
  private users: Observable<UserId[]>;

  constructor(public db: AngularFirestore) {
    this.usersCollection = db.collection('users');
    this.users = this.usersCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data() as User;
          const id = a.payload.doc.id;
          return {id, ...data};
        })
      })
    )
  }

  saveUser(idToken: string, user: User) {
   return this.usersCollection.doc('idToken').add({
     displayName: user.displayName
   });
  }

  getUsersByDisplayName(displayName:string){
    return this.usersCollection.where("displayName", "===", displayName);
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFirestoreModule } from 'angularfire2/firestore';

import { MyApp } from './app.component';
import {FIREBASE_CONFIG} from "./app.firebase.config";
import {AuthService} from "../services/authservice";
import {HouseService} from "../services/houseservice";
import {UserService} from "../services/userservice";

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(FIREBASE_CONFIG),
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AuthService,
    HouseService,
    UserService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

package.json

{
  "name": "firebaseauth",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.17.0",
    "@ionic-native/splash-screen": "~4.17.0",
    "@ionic-native/status-bar": "~4.17.0",
    "@ionic/storage": "2.2.0",
    "angularfire2": "^5.1.1",
    "firebase": "^5.7.1",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "promise-polyfill": "^8.1.0",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.1",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

Answer 1

您找到了正确的文档，但看起来像是几根电线交叉了。您在错误的地方调用.add()方法，应该在整个集合上使用它，并且您试图在单个文档上使用它。

在the link you gave中，请注意，此（截断的）代码在集合上使用了.add()：

constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<Item>('items');
}
addItem(item: Item) {
    this.itemsCollection.add(item);
}

在尝试处理单个文档的地方：

this.usersCollection.doc('idToken').add(

如果您要向该集合中添加新文档，只需对集合使用.add()。

另一方面，如果您要向单个文档中添加详细信息，请签出this documentation on AngularFire2以及显示您拥有.set()，{{ 1}}，.update()和.get()可用于与文档进行交互。

关于您的.delete()问题...

您还没有为.where()子句使用正确的语法，请查看base Firebase documentation，它们在其中提供了正确语法的示例：

where

所以你应该是：

afs.collection('items', ref => ref.where('size', '==', 'large'))

Answer 2

我遇到的主要问题是我的WebStorm IDE已过期2年，并且无法识别很多打字稿类型。如果在与我相同的情况下有些失落的灵魂会发现这一点，我将在此发布。感谢JeremyW的回答，尽管它是正确的！

无法使用AngularFire和ionic调用AngularFirestoreCollections上的某些函数

2 个答案: