Сортировка массива по дате в машинописи

Question

Я хочу настроить страницу в D365 Event Management. Это написано в HTML, CSS, JS, AngularJS и Typescript.

У меня есть html файл с обзором событий:

<div class="spinner-container m-5" *ngIf="isLoading">
    <app-spinner></app-spinner>
</div>


<div *ngIf="!isLoading">
    <div class="container">
        <div class="page-header">
            <h3 [appTranslate]="'AvailableEvents'">Available events</h3>
        </div>
    </div>

    <div *ngIf="error">
        <app-errormessage
            [serverErrorMessage]="error.message"
            [errorMessageTranslationKey]="error.localizationKey">
        </app-errormessage>
    </div>

    <div *ngIf="allEvents" class="container mt-5" id="all-events">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4" attr.data-href="/event?id={{ event.readableEventId }}" *ngFor="let event of allEvents">
                <div class="card mx-auto mb-4" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">
                             <a [routerLink]="['/event']" [queryParams]="{id: event.readableEventId}" title="{{ event.eventName }}" [attr.aria-label]="getAreaLabel(event)">
                                {{ event.eventName }}</a>
                        </h5>
                        <h6 *ngIf="event.building" class="card-subtitle mb-2 text-dark">at {{ event.building.name }} </h6>
                    </div>
                    <div class="card-footer text-dark" >
                       {{ getDateString(event) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Сначала я попытался отсортировать div, но так как значения дат являются динамическими c Я подумал, что это невозможно. Поэтому я перешел к файлу машинописи:

import { EVENT_SERVICE } from './../../providers/service.providers';
import { EventService } from '../../services/event.service';
import { Component, Inject, OnInit } from '@angular/core';
import { Event } from '../../models/Event';

...

export class HomeComponent implements OnInit {
    public allEvents: Event[];
    public isLoading: boolean;
    public error?: LocalizableError;

    constructor(@Inject(EVENT_SERVICE) private eventService: EventService) {
    }

    ngOnInit(): void {
        this.sortEvents();
        this.loadPublishedEvents();
    }

//---> This is my try to sort it
    private sortEvents(){
        this.allEvents.sort((a, b) => a.startDate.getDate() - b.startDate.getDate());
    }
//<---
    private loadPublishedEvents() {
        this.isLoading = true;
        this.eventService.getPublishedEvents().subscribe(
            events => {
                this.allEvents = events;
                this.isLoading = false;
            },
            (error: LocalizableError) => this.handleErrorResponse(error)
        );
    }

...

private getDateString(event:Event): string{

        var startDate = new Date(event.startDate.toString());
        var endDate = new Date(event.endDate.toString());
        var locale = undefined;
        const dateOptions = { year: 'numeric', month: 'short', day: 'numeric' };
        const timeOptions = { hour:'numeric', minute:'numeric' };

        var includeTime = startDate.getFullYear() ===  endDate.getFullYear() && startDate.getMonth() ===  endDate.getMonth() && startDate.getDate() ===  endDate.getDate();
        if(includeTime)
        {
            return `${startDate.toLocaleDateString(locale, dateOptions)} ${startDate.toLocaleTimeString(locale, timeOptions)} - ${endDate.toLocaleTimeString(locale, timeOptions)}`;
        }
        return `${startDate.toLocaleDateString(locale, dateOptions)} - ${endDate.toLocaleDateString(locale, dateOptions)}`;
    }

Event.ts:

export interface Event {
    ...
    endDate: Date;
    startDate: Date;
    ...
}

Теперь у меня вопрос, как отсортировать события по дате. В стандарте его отсортировано по имени. когда я сортирую это, как я сделал, элементы не появятся. Я думаю, что проблема в том, что дата событий не создается с «newDate», как в getDateString (). Я не очень знаком с машинописью. Также не могу найти что-нибудь в Google, кроме того, что я уже пробовал.

Было бы очень приятно, если бы кто-то мог помочь мне здесь Если у вас есть какие-либо вопросы, просто спросите.

спасибо заранее:)

Answer 1

Здесь может быть так, что фактические значения даты a.startDate и b.startDate во время выполнения равны undefined.

Вы можете попытаться увидеть, если вы снова получите какие-либо результаты при использовании this:

this.allEvents.sort((a, b) => (a.startDate && b.startDate) ? a.startDate.getTime() - b.startDate.getTime() : 0);

Если вы снова видите (частично несортированные) результаты, вы знаете, что проблема действительно вызвана undefined значениями этих полей даты. В этом случае вы можете дополнительно настроить функцию сортировки, правильно обрабатывая значения undefined:

this.allEvents.sort((a, b) => {
  if (a.startDate && b.startDate) {
    return a.startDate.getTime() - b.startDate.getTime();
  }
  else {
    // do something sophisticated regarding the `undefined` values and return a correct sorting value here...
  }
});