Question

我有一个ionic-firebase聊天应用程序，我想按照WhatsApp的方式按日期对聊天进行分组，因此聊天顶部的标签是“今天”，“昨天”等。所有消息都带有时间戳。但是我需要一种使用它们来对消息进行分组的方法。谢谢。

     this.chatService.markAsSeen();
     this.allMessages = [];
     this.allMessages = this.chatService.matchMessages;
   })```

```   <ion-list no-lines>
     <ion-item
       no-lines
       *ngFor="let item of allMessages; let i = index"
       text-wrap
     >

       <div class="bubble me" *ngIf="item.sentBy === match.uid">
         <h3 class="line-breaker">{{ item.message }}</h3>
         <p class="time-me">{{ item.time }}</p>
       </div>

       <div class="bubble you" *ngIf="item.sentBy != match.uid">
         <h3 class="line-breaker">{{ item.message }}</h3>
         <p class="time-you">{{ item.time }}</p>
       </div>
       <div
         class="seen"
         *ngIf="item[matchUid] == 0 && item.sentBy !== match.uid"
       >
         Seen
       </div>

     </ion-item>
   </ion-list>```

Answer 1

我们的聊天应用程序具有相同的功能。对于HTML，放在您的ion-item中：

  <ion-row *ngIf="isDifferentDay(index)">
      <ion-badge>{{getMessageDate(index)}}</ion-badge>
    </ion-row>

然后输入打字稿：

 private isDifferentDay(messageIndex: number): boolean {

    if (messageIndex === 0) return true;

    const d1 = new Date(this.allMessages[messageIndex - 1].date);
    const d2 = new Date(this.allMessages[messageIndex].date);

    return d1.getFullYear() !== d2.getFullYear()
      || d1.getMonth() !== d2.getMonth()
      || d1.getDate() !== d2.getDate();
}

 private getMessageDate(messageIndex: number): string {

   const wholeDate = new Date(this.allMessages[messageIndex].date).toDateString();

   this.messageDateString = wholeDate.slice(0, wholeDate.length - 5);

   return this.messageDateString;

 }

不客气：）

使用离子按日期分组聊天

1 个答案: