typescript - Angular - Looping through schedules in an array and group them together according to day not the time from the timestamp properties from firestore

Question

I have an array of schedules which have properties start, end and title from firestore, the start and end are both timestamp, and I am having problem grouping the schedules which will together in the view. I try to add start date to a separate array. I then compared the startDate with the start property of the objects in the array.

scheduleViewChange(ev: CustomEvent<SegmentChangeEventDetail>) {
    if (ev.detail.value === "day") {
      this.scheduleService.getTodaySchedule().subscribe((values: ISchedule[]) => {
        this.events = values;
      });
      return;
    }
    this.scheduleService.getThisWeekSchedule().subscribe(values => {
      this.startDates = [];
      this.events = values;
      values.forEach(value => {
        this.startDates.push(value.start);
      });
    });
  }

This is the template

<div *ngFor="let startDate of startDates">
          <h2>{{startDate * 1000 |date: "mediumDate"}}</h2>
          <ion-list *ngFor="let event of events" class="ion-no-margin" #scheduleDay>
            <ion-item class="ion-no-margin" *ngIf="startDate===event.start">
              <label>
                <h4>{{event.title}}</h4>
                <small class="ion-margin-end">Start: {{event.start.seconds*1000 | date: "shortTime" }}</small>
                <small class="ion-margin-start">End: {{event.end.seconds*1000 | date: "shortTime" }}</small>
              </label>
            </ion-item>
          </ion-list>
        </div>

question from:https://stackoverflow.com/questions/65849590/angular-looping-through-schedules-in-an-array-and-group-them-together-accordin

Answer 1

Waitting for answers