使用 ionic 按日期分组聊天

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;

 }

不客气:)