2016-10-13 17 views
1

私には分かりませんが、誰かが助けてくれれば幸いです。ループ内の項目は定義されていません

私はMeteor/MongoDbでIonic2を使用しています。また

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

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

、私は:それは、観察期待通りトリガー

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

:私は挿入を行うサーバで

private messages: Mongo.Cursor<Message>; 

私はカーソルを持っていますforEachからmessagesに変更され、すべて期待どおりに配置されます。

問題

私の問題はhtmlです。私はループmessagesカーソルをループします。期待どおりに各項目を表示します。私がmessageを追加するまで(上記のように)。 htmlの新しいmessageundefinedです。

<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> 

ループ(新しいものが追加された)の最後のmessageアイテムは、undefinedあります。すなわち、htmlから呼び出される*ngIf="!exists(message)"関数では、messageとそのundefinedを印刷します。

従ってhtmlでは、カーソルはmessagesの上にループし、新しいものはundefinedです。しかし、同じ機能(exists())であっても、messagesカーソルを再びループしてテストするだけで、undefinedという項目はありません。

質問

誰もが私はないに何ができるかを提案することができますしてくださいはundefinedとしてCursorの最後のitemがありますか?

おかげ

UPDATE

私は理解していない何かを取得しています。

{{ formatMessage(message) }}

しかし、次のように、私は関数を呼び出した場合、それはundefinedです::

次のように私はhtmlから関数を呼び出し、messageundefinedない

*ngIf="!exists(message)"

答えて

0

私はこれを使ってこれを解決しました:

changeDetection: ChangeDetectionStrategy.OnPush, 

しかし、私はまだ、角にバグがあると思われます

関連する問題