Question

我正在为此项目使用Angular 6。

我的 feed.component.ts 文件：

import { Component, OnInit, OnChanges } from '@angular/core';
import { ChatService } from '../services/chat.service';
import { Observable } from 'rxjs';
import { chatMessegeModel } from '../models/chat-message.model';
import { FirebaseListObservable } from 'angularfire2/database-deprecated';

@Component({
selector: 'app-feed',
templateUrl: './feed.component.html',
styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit, OnChanges {
feed: FirebaseListObservable<chatMessegeModel[]>;

constructor(private chat: ChatService) { }

ngOnInit() {
this.feed = this.chat.getMessages();
 // This getMessage function form ChatService
 // getMessages(): FirebaseListObservable<chatMessegeModel[]>{        
 //   return this.db.list('message',{
 //     query: {
 //       limitToLast: 25,
 //       orderByKey: true
 //     }
 //   })
 // }
 }

ngOnChanges() {
this.feed = this.chat.getMessages();
}

 }

ChatService.service.ts：

import { Injectable } from '@angular/core';
import { FirebaseListObservable,AngularFireDatabase } from 
"angularfire2/database-deprecated";
// import {  } from "angularfire2/database";
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs';

import { chatMessegeModel } from '../models/chat-message.model';
import { auth } from 'firebase';

 @Injectable()

export class ChatService {
user: any;
ChatMessages: FirebaseListObservable<chatMessegeModel[]>;
ChatMessage: chatMessegeModel;
 username: Observable<string>;

 constructor(
 private db: AngularFireDatabase,
 private afAuth: AngularFireAuth
  ) { 
  afAuth.authState.subscribe(auth =>{
  // if(auth !== undefined && auth !== null){
  //   this.user = auth;
  // }
   }
  )
 }

 sendMessage(msg: string){
   const timeStand = this.getTimeStand();
   // const email = this.user.email;
  this.ChatMessages = this.getMessages();
   this.ChatMessages.push({
    message: msg,
    timeStand: timeStand,
    username: 'Rakibul',
    email: 'rakiubl97@gmail.com'
   });    
 }

 getTimeStand(){
  const now = new Date();
  const date = now.getUTCFullYear() +'/'+
            (now.getUTCMonth()+ 1 )+ '/'+
             now.getUTCDate();
  const time = now.getUTCHours() + ':' +
            now.getUTCMinutes() + ':' +
            now.getUTCSeconds();
  return (date + ' ' + time);
 }

 getMessages(): FirebaseListObservable<chatMessegeModel[]>{  
   console.log('call dial');

    return this.db.list('message',{
     query: {
      limitToLast: 25,
      orderByKey: true
    }
    })
   }
 }

和模板：

<div *ngFor="let message of feed | async" >
<app-message [chatMessage]=message ></app-message>

但是我的控制台出现错误：

core.js：1673错误TypeError：rxjs_operators__WEBPACK_IMPORTED_MODULE_4 __。switchMap.call（...）。subscribe不是函数在FirebaseListObservable._subscribe（firebase_list_factory.js：75）在FirebaseListObservable.push ../ node_modules / rxjs / _esm5 / internal / Observable.js.Observable._trySubscribe（Observable.js：42）在FirebaseListObservable.push ../ node_modules / rxjs / _esm5 / internal / Observable.js.Observable.subscribe（Observable.js：28）在ObservableStrategy.push ../ node_modules/@angular/common/fesm5/common.js.ObservableStrategy.createSubscription（common.js：4498）在AsyncPipe.push ../ node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe（common.js：4578）在AsyncPipe.push ../ node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform（common.js：4559）在Object.eval [作为updateDirectives]（FeedComponent.html：1）在Object.debugUpdateDirectives [作为updateDirectives]（core.js：11061）在checkAndUpdateView（core.js：10458）在callViewAction（core.js：10699）

Answer 1

AngularFire 5.0是AngularFireDatabase模块的重构。它删除了FirebaseListObservable和FirebaseObjectObservable，转而使用了基于通用的服务API。

不是AngularFireObject是FirebaseObjectObservable，而AngularFireList不是FirebaseListObservable

package.json

如何在angularListObservable <any []>上使用异步

1 个答案: