Группировать чаты по дате с использованием ионных

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:

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

 }

Не за что:)