Невозможно вызвать некоторые функции на AngularFirestoreCollections с AngularFire и ionic - PullRequest
Новая
       40

Невозможно вызвать некоторые функции на AngularFirestoreCollections с AngularFire и ionic

0 голосов
/ 30 декабря 2018

Я экспериментирую с AngularFire и Ionic.Я пытаюсь следовать нескольким учебникам, которые я нашел, и пытаюсь смоделировать службу, которую я делаю, основываясь почти на 100% на примере, найденном на текущем примере AngularFire из их github. Проблема в том, чтоЯ имею в виду, что каждый раз, когда я делаю коллекцию, ни один из методов, таких как .add (), where () или snapshotChanges (), кажется, не работает.На моей IDE WebStorm они красные, говоря, что методы не решены.

Я не уверен, может ли это быть версионностью или мой импорт неверен или просто я читаю какую-то неправильную информацию.Я видел довольно много примеров проектов / уроков, и этот конкретный шаблон, на который я смотрю, кажется довольно распространенным, что меня смущает.Также я просто удалил модули узлов и запустил новую установку 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"
}

Ответы [ 2 ]

0 голосов
/ 07 января 2019

Основная проблема, с которой я столкнулся, заключалась в том, что моя среда IDE WebStorm устарела на 2 года и не распознавала большинство типов машинописного текста.Я публикую это в случае, если какая-то потерянная душа в той же ситуации, что и я, найдет это.Спасибо JeremyW за ответ, хотя как правильно!

0 голосов
/ 31 декабря 2018

Вы нашли правильную документацию, но похоже, что вы пересекаете пару проводов.Вы вызываете метод .add() не по адресу, он должен быть в общей коллекции , и вы пытаетесь использовать его для отдельного документа .

Из ссылки, которую вы дали , обратите внимание, что ( усеченный ) код использует .add() в коллекции : 

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

Гдекогда вы пытаетесь использовать отдельный документ : 

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

Если вы пытаетесь добавить новый документ в эту коллекцию, просто используйте .add() для коллекции.

С другой стороны, если вы пытаетесь добавить детали к отдельному документу, ознакомьтесь с этой документацией по AngularFire2 , а также базовой документацией Firebase , которая показывает, что у вас есть.set(), .update(), .get() и .delete() доступны для взаимодействия с документами.

Что касается вашей проблемы с .where() ...

Вы также неиспользуя правильный синтаксис для предложения where, посмотрите этот документ на запрос к коллекциям где tэй, приведите пример правильного синтаксиса: 

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

Так что ваш должен быть: 

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