Cursor item undefined

help
1

Hi All,

I have an issue that I don’t understand, and if anyone can help, I would appreciate it.

I am using Ionic2 with Meteor/MongoDb.

I have a cursor:

private messages: Mongo.Cursor<Message>;

On the server I do an insert:

    Messages.insert({
      chatId: chatId,
      senderId: senderId,
      content: content,
      readByReceiver: false,
      createdAt: new Date()
    });

It triggers an observable as expected:

        this.messages.observe({
          added: (message) => this.addMessageToLocal(message)
        });

  private addMessageToLocal(newMessage: Message): void {
     // here I print the message, and it is as expected
  }

Also, I do a forEach through the messages, and they are all populated as expected.

Issue

My problem is in the html. I loop trough the messages cursor. It displays each item as expected. Until I add a message (as above). Then the new message from the html is undefined.

		<template ngFor let-message [ngForOf]="messages">
				<div *ngIf="!exists(message)" 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 && senderId == message.senderId">
							<span class="checkmark">
                <div class="checkmark_stem"></div>
                <div class="checkmark_kick"></div>
            </span>
						</div>
						</span>
					</div>
				</div>
		</template>

The final message item in the loop (the new one added), is undefined. i.e. In the *ngIf="!exists(message)" function called from the html, I print the message, and its’s undefined.

So in the html I loop over the messages Cursor, and the new one is undefined. However, if even in the same function (exists()), I loop over the messages Cursor again, just to test it, none of the items are undefined.

Question

Please can anyone suggest what I can do to not have the last item in the Cursor as undefined?

Thanks

2

I am getting something I don’t understand.

When I call a function from the html as follows, message is not undefined:

{{ formatMessage(message) }}

But if I call a function as follows, it is undefined:

*ngIf="!exists(message)"

3

I solved this by using:

changeDetection: ChangeDetectionStrategy.OnPush,

But I still think there may be a bug in Angular