Ionic chat app not displaying messages

@acryforhelp wrote:

I am trying to make a chat app, every time someone submits a message, it should get displayed but that is simply not happening.

my HTML code is

<ion-header>

  <ion-navbar>
    <ion-title>schat</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

<ion-list>
<ion-item *ngFor="let chat of chats" no-lines>
    <div class="chat-status" text-center *ngIf="chat.type==='join'||chat.type==='exit';else message">
      <span class="chat-date">{{chat.sendDate | date:'short'}}</span>
      <span class="chat-content-center">{{chat.message}}</span>
    </div>
    <ng-template #message>
      <div class="chat-message" text-right *ngIf="chat.user === username">
          <div class="right-bubble">
            <span class="msg-name">Me</span>
            <span class="msg-date">{{chat.sendDate | date:'short'}}</span>
            <p text-wrap>{{chat.message}}</p>
          </div>
        </div>
        <div class="chat-message" text-left *ngIf="chat.user !== username">
          <div class="left-bubble">
            <span class="msg-name">{{chat.user}}</span>
            <span class="msg-date">{{chat.sendDate | date:'short'}}</span>
            <p text-wrap>{{chat.message}}</p>
          </div>
        </div>
      </ng-template>
    </ion-item>
  </ion-list>

<ion-footer>
  <ion-grid>
    <ion-row>
      <ion-col col-10>
        <ion-input type="text" placeholder="Type a message" [(ngModel)]="data.message" name="message"></ion-input>
      </ion-col>
      <ion-col col-2 (click)="sendMessage()">
        <ion-icon name="paper-plane"></ion-icon>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

My typescript code is:

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Content } from 'ionic-angular';
import * as firebase from 'firebase';

/**
 * Generated class for the SchatPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-schat',
  templateUrl: 'schat.html',
})
export class SchatPage {
  @ViewChild(Content) content: Content;
  fire=firebase.database();
  data = { message:'', username:'', type:''};
  chats=[];
  userId:string;
  key:string;
  offStatus:boolean=false;



  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.userId = firebase.auth().currentUser.uid;
    this.data.type='message';
    this.data.username=this.userId;

    this.fire.ref('/users/' + this.userId).once('value', resp=>{
      let details=resp.val();
      let schoolid=details.schoolid;

      this.key = this.fire.ref('/chats/').push().key;

      this.fire.ref('/chats/' + this.key).set({
        studentid:this.userId,
        chatended:false,
        chatstarted:false,
        startime:new Date().toLocaleString(),
        chatid:this.key,
        schoolid:schoolid




      });
    });

    this.fire.ref('/chats/'+this.key+'/messages').on('value', resp=>{
      let detail=resp.val();

      console.log(detail);

      this.chats=[];
      this.chats=snapshotToArray(resp);
      setTimeout(() => {
        if(this.offStatus === false) {
          this.content.scrollToBottom(300);
        }
      }, 1000);

    });
}


sendMessage() {

  this.fire.ref('/chats/'+this.key+'/messsages').push().set({
    type:this.data.type,
    user:this.userId,
    message:this.data.message,
    sendDate:new Date().toLocaleString(),

  });
  this.data.message = '';
}

  ionViewDidLoad() {
    console.log('ionViewDidLoad SchatPage');
  }

}
export const snapshotToArray = snapshot => {
    let returnArr = [];

    snapshot.forEach(childSnapshot => {
        let item = childSnapshot.val();
        item.key = childSnapshot.key;
        returnArr.push(item);
    });

    return returnArr;
};

Posts: 1

Participants: 1

Read full topic