FirebaseListObservable issue

i’m try to implement a chat application.but when i use ionic serve showing an error.

how can i fix it,
please helpvme anyone.
Thanks in advance

It seems like you are using angularFire version 5.0

They removed their “Firebase” objects, now you need to use normal Observable objects. Read this:


Actually i’m new in ionic.please tell me how to implement below code

export class ChatPage {

  username: string = '';
  message: string = '';
  _chatSubscription;
  messages: object[] = [];

  constructor(public db: AngularFireDatabase,
    public navCtrl: NavController, public navParams: NavParams) {
      this.username = this.navParams.get('username');
      this._chatSubscription = this.db.list('/chat').subscribe( data => {
        this.messages = data;
      });
    }

    sendMessage() {
      this.db.list('/chat').push({
        username: this.username,
        message: this.message
      }).then( () => {
        // message is sent
      }).catch( () => {
        // some error. maybe firebase is unreachable
      });
      this.message = '';
    }

    ionViewDidLoad() {
      this.db.list('/chat').push({
        specialMessage: true,
        message: `${this.username} has joined the room`
      });
    }

    ionViewWillLeave(){
      this._chatSubscription.unsubscribe();
      this.db.list('/chat').push({
        specialMessage: true,
        message: `${this.username} has left the room`
      });
    }
  }

please help me

Did you follow the upgrade guide linked to by @tplocic20?

Yes.but i did not understand

this is my new code.its run properly .but data not showing.how can i fix it.

export class ChatPage {

  username: string = '';
  message: string = '';
  _chatSubscription;
  messages:Observable<any[]>;

  constructor(public db: AngularFireDatabase,
    public navCtrl: NavController, public navParams: NavParams) {
      this.username = this.navParams.get('username');
      this.messages = db.list('/chat').valueChanges();
    }

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

    ionViewDidLoad() {
      this.db.list('/chat').push({
        specialMessage: true,
        message: `${this.username} has joined the room`
      });
    }

    ionViewWillLeave(){
      this._chatSubscription.unsubscribe();
      this.db.list('/chat').push({
        specialMessage: true,
        message: `${this.username} has left the room`
      });
    }
  }

Can you show html code where you are trying to display messages?

this is my html page

<ion-header>

  <ion-navbar>
    <ion-title>Chat</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <div id="chatMessages">
    <div *ngFor="let message of messages" [class]="message.specialMessage ? 'message special' : 'message'">
      <div [class]="message.username == username ? 'innerMessage messageRight' : 'innerMessage messageLeft'">
        <div class="username">{{ message.username }}</div>
        <div class="messageContent">{{ message.message }}</div>
      </div>
    </div>
  </div>

</ion-content>

<ion-footer>
  <ion-toolbar>
    <div id="footer">
      <div class="elem"><ion-input type="text" [(ngModel)]="message"></ion-input></div>
      <div class="elem"><button ion-button icon-only (click)="sendMessage()"><ion-icon name="send"></ion-icon> </button></div>
    </div>
  </ion-toolbar>
</ion-footer>

this is mt .ts file

export class ChatPage {

  username: string = '';
  message: string = '';
  _chatSubscription;
    messages: any;

  constructor(public db: AngularFireDatabase,
    public navCtrl: NavController, public navParams: NavParams) {
      this.username = this.navParams.get('username');
 db.object('/chat').snapshotChanges().map(action => {
    //const $key = action.payload.key;
    //c//onst data = { $key, ...action.payload.val() };
    //return data;
  }).subscribe(item => {

    this.messages=item;
  });
    }

    sendMessage() {
      this.db.list('/chat').push({
        username: this.username,
        message: this.message
      }).then( () => {
        // message is sent
      })
      this.message = '';
    }
    ionViewDidLoad() {
      this.db.list('/chat').push({
        specialMessage: true,
        message: `${this.username} has joined the room`
      });
    }
    ionViewWillLeave(){
      this._chatSubscription.unsubscribe();
      this.db.list('/chat').push({
        specialMessage: true,
        message: `${this.username} has left the room`
      });
    }
  }

If I understand properly, “Chat” contains list of messages. If so you better retrieve it using db.list() or as you did it before

this.messages = db.list('/chat').valueChanges();

Also you need to add “async” pipe in ngFor in html, because returned value is an Observable

<div *ngFor="let message of messages | async" ... >

Sir, messages variable declear look like that?
messages: Observable<any[]>;

thank you so much sir.for your value able reply.now its working fine.

Great,

Glad I was able to help

hi Sir @flycoders_sourav, now I have the same problem as you, please tell me how to implement my code? My code is the same as your code, but not working.

Could you send the “chat” code (html, ts, scss)? For my code is not running. robsonalfaia21@gmail.com. Thank you!

hello, did you get the code? i am having the same problem as well. my code isnt working.