How can I use async on angularListObservable<any[]>

Question

I am using Angular 6 for this project.

My feed.component.ts file:

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();
}

 }

The 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: '[email protected]'
   });    
 }

 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
    }
    })
   }
 }

and the template:

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

But I have the error in my console:

core.js:1673 ERROR TypeError: rxjs_operators__WEBPACK_IMPORTED_MODULE_4__.switchMap.call(...).subscribe is not a function at FirebaseListObservable._subscribe (firebase_list_factory.js:75) at FirebaseListObservable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42) at FirebaseListObservable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28) at ObservableStrategy.push../node_modules/@angular/common/fesm5/common.js.ObservableStrategy.createSubscription (common.js:4498) at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe (common.js:4578) at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform (common.js:4559) at Object.eval [as updateDirectives] (FeedComponent.html:1) at Object.debugUpdateDirectives [as updateDirectives] (core.js:11061) at checkAndUpdateView (core.js:10458) at callViewAction (core.js:10699)

Answer 1

AngularFire 5.0 is a refactor of the AngularFireDatabase module. It removes the FirebaseListObservable and FirebaseObjectObservable in favor of a generic based service API.

It is AngularFireObject not FirebaseObjectObservable and AngularFireList not FirebaseListObservable

import { AngularFireObject, AngularFireList } from 'angularfire2/database';