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

Question

我正在试验 AngularFire 和 Ionic。我正在尝试按照我发现的一些教程进行操作，并尝试根据当前 AngularFire example from their github. 上找到的示例几乎 100% 地模拟我正在制作的服务我遇到的问题是任何时候我制作一个集合，none 方法，例如 .add()、where() 或 snapshotChanges() 似乎有效。在我的 WebStorm IDE 上，它们是红色的，表示方法未解决。

我不确定这是否可能是版本问题，或者我的导入是否有误，或者只是我阅读了一些错误的信息。我已经看到了很多示例 projects/tutorials，我正在查看的这个特定模式似乎很常见，这让我感到困惑。另外我刚刚删除了节点模块和运行一个新的 npm 安装。如果有人能在正确的方向上帮助 me/point 我，那就太好了！谢谢

以下是一些相关文件：

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, as well as the base Firebase documentation，其中显示您有 .set()、.update()、.get()，并且 .delete() 可用于与文档进行交互。

关于你的问题 .where()...

您也没有为 where 子句使用正确的语法，请查看 this doc on querying collections 他们提供的正确语法示例：

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

所以你的应该是：

return afs.collection('users', ref => ref.where('displayName', '==', displayName));

Answer 2

我遇到的主要问题是我的 WebStorm IDE 已经过时 2 年了，无法识别很多打字稿类型。我发布这个是为了防止一些和我处境相同的迷失灵魂找到这个。感谢 JeremyW 的回答，因为它是正确的！

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

Unable to call some functions on AngularFirestoreCollections with AngularFire and ionic

firebase

typescript

ionic-framework

angularfire2

angular