在Ionic 3移动应用程序中显示来自Firebase的数据时出错 - 错误:TypeError:this.db.object(...)。subscribe不是函数

时间:2017-12-06 02:36:20

标签: firebase ionic-framework ionic2 ionic3 angularfire

我正在尝试使用Ionic 3和Firebase创建一个简单的聊天应用程序。注册和登录用户工作。当他们发送邮件时,他们的邮件和用户名会保存在Firebase中,但我无法在我的应用程序中显示此邮件:

错误:未捕获(在承诺中):TypeError:this.db.object(...)。subscribe不是函数

我只是想在控制台上显示消息。 Chat.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
import { Storage } from '@ionic/storage';

@IonicPage()
@Component({
  selector: 'page-chat',
  templateUrl: 'chat.html',
})
export class ChatPage {

  username: string= '';
  message: string= '';
  s;

  constructor(public db: AngularFireDatabase, public navCtrl: NavController, public navParams: NavParams, private storage: Storage) {
    this.storage.get('username').then((val) => {
      if (val != null) {
        this.username= val;
      }
    });

    this.s= this.db.object('/chat').subscribe(data => {
      console.log(data);
    });
  }

  sendMessage() {
    this.db.list('/chat').push({
      username: this.username,
      message: this.message
    }).then( () => {

    }).catch( () => {

    });
  }

  ionViewDidLoad() {
    let username= '';

    this.storage.get('username').then((val) => {
      if (val != null) {
        username= val;
        console.log('ionViewDidLoad ChatPage', username);
      }
    });
  }
}

我在app.module.ts中设置了Firebase:

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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { RegisterPage } from '../pages/register/register';
import { LoggedinPage } from '../pages/loggedin/loggedin';
import { ChatPage } from '../pages/chat/chat';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { IonicStorageModule } from '@ionic/storage';

export const firebaseAuth= {
    apiKey: "AIzaSyCKjJFl1LvnViPdoGSuh2j85osPnevoM3Q",
    authDomain: "chat-97a37.firebaseapp.com",
    databaseURL: "https://chat-97a37.firebaseio.com",
    projectId: "chat-97a37",
    storageBucket: "chat-97a37.appspot.com",
    messagingSenderId: "197759314650"
  };

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    RegisterPage,
    LoggedinPage,
    ChatPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseAuth),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    RegisterPage,
    LoggedinPage,
    ChatPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

0 个答案:

没有答案