Dfyjkt

I'm currently developing a simple chat (like Facebook's) for a web application.
I'm using Angular 6 as framework and Firebase as my database.

When a user clicks on a certain conversation, I'm retrieving the previous messages using the .on("child_added, //function here) and then I'm pushing the results into an array which will be displayed using an *ngFor loop.

The weird issue I'm encountering is that the messages will be displayed sometimes correctly, and sometimes not displayed at all. When this happens, as soon as I click anywhere, the *ngFor will be called again and everything looks fine.

Using console.logs I found out that the data is pushed correctly into the array every time, but, for some reason, the ngFor (same with ngAfterViewChecked) sometimes will update and sometimes will just return an empty array.

My .ts file (relevant parts):

ngAfterViewChecked() 
 /*
 when everything works, this will be called everytime something changes
 (even after the array gets populated) 
 when the issue comes up, this will be called as usual but it won't be called after the array gets populated,
 thus returning an empty array the last time it was called 
 */

 console.log(this.msgService.messageList)
 

//this will be called everytime a user clicks on a conversation on the left sidebar
getSpecConversation(conversation) 
 //emptying the array 
 this.msgService.messageList = ;

 //calling the .off using previous conversation key
 this.msgService.getConversation(this.msgService.selectedConversation.$key)
 .off('child_added');

 //getting messages of currently selected conversation
 this.msgService.getConversation(conversation.$key)
 .on('child_added', (data => 
 //push the data into array
 this.msgService.messageList.push(data.val());
 )
 );

 //storing currently selected conversation
 this.msgService.selectedConversation = conversation;

the Template (relevant parts):

<ul class="conversation-list">
 <li *ngFor="let message of msgService.messageList" class="conversation-item" [class.sender]="message.byUid == userInfoService.userUid">
 <p class="message">message.msg</p>
 <p class="msg-time">
 <span> date: 'shortTime'</span></p>
 </li>
</ul> 

The Service:

getConversation(sid: string) 
 return this.database.ref('/messages') 

Thanks for the help

Update
If it helps, if I delete the .off('child_added') method, the problem won't show up anymore, but, when I send a new message, I would have the new message called multiple times in the view (not in database).

Update your template and check that the array has data before you show it.

<ul class="conversation-list" *ngIf="msgService.messageList && msgService.messageList.length > 0">
 <li *ngFor="let message of msgService.messageList" class="conversation-item" [class.sender]="message.byUid == userInfoService.userUid">
 <p class="message">message.msg</p>
 <p class="msg-time">
 <span> date: 'shortTime'</span></p>
 </li>
</ul> 

It could be a race condition - the ngFor loop could run before the array has any data in it, and then when you click around the page, a hook is running telling the ngFor to run again - this time finding data.

When you run the ngIf before it will check for data, as soon as it's available it allows the ngFor to run which will now have data to iterate over and display in your list.

You're getting the data from a service, so it could be that you need to use the async pipe.

<li *ngFor="let message of msgService.messageList | async">
 <p class="message">message.msg</p>
</li>