Групповые чаты по дате с помощью ionic

У меня есть приложение чата 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>```

html firebase ionic-framework

20.04.2019 04:07

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

344

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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;

 }

Пожалуйста :)

Большое спасибо, @wcjord. Это именно то, что мне было нужно :-D

— 21.04.2019 13:03

20.04.2019 20:02