Hi All,
I am using Ionic2 with Meteor/mongo to display a list of messages
.
I display local messages
and then server messages
.
html
<ion-content padding class="messages-page-content">
<ion-scroll scrollY="true" class="messages">
<div *ngIf="localMessageCursor && localMessageCursor.count() > 0">
<div *ngFor="let message of localMessageCursor" class="message-wrapper">
<div *ngIf="message">
<div *ngIf="message.changeDate">
<center><span class="message-datetime">{{message.createdAt | amDateFormat: 'DD MMM YYYY'}}</span></center>
</div>
<div [class]="'message message-' + message.ownership">
<div class="message-content">local:{{message.content}}</div>
<span class="time-tick">
<span class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span>
<div *ngIf="message.readByReceiver === true && senderId && senderId === message.senderId">
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
</div>
</span>
</div>
</div>
</div>
</div>
<template ngFor let-message [ngForOf]="messages">
<div *ngIf="message && exists(message) === false" class="message-wrapper">
<div *ngIf="message.changeDate">
<center><span class="message-datetime">{{message.createdAt | amDateFormat: 'DD MMM YYYY'}}</span></center>
</div>
<div [class]="'message message-' + message.ownership">
<div class="message-content">server:{{message.content}}</div>
<span class="time-tick">
<span *ngIf="message" class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span>
<div *ngIf="message && message.readByReceiver === true && senderId && senderId === message.senderId">
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
</div>
</span>
</div>
</div>
</template>
</ion-scroll>
</ion-content>
ts
public messages: Mongo.Cursor<Message>;
public localMessageCursor: Mongo.Cursor<Message>;
Messages.insert({
chatId: chatId,
senderId: senderId,
content: content,
readByReceiver: false,
createdAt: new Date()
});
This works fine when I initially load the page. It displays all the messages in both Cursors. If I add a message
to the localMessageCursor
, the list is dynamically updated as expected. However, if I add a message
to themessages
Cursor, then it freezes (No messages are displayed, and the page is unresponsive).
I have tried trimming down the html
, to be just as follows, but I get the same result.
<div *ngIf="localMessageCursor && localMessageCursor.count() > 0">
<div *ngFor="let message of localMessageCursor" class="message-wrapper">
<div *ngIf="message">
{{message.content}}
</div>
</div>
</div>
<template ngFor let-message [ngForOf]="messages">
{{message.content}}
</template>
If anyone can give me any ideas, I would appropriate it.