在打字稿中按日期对数组进行排序

Question

我想在 D365 事件管理中自定义一个页面。 它用 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 进行排序，但由于日期的值是动态的，我认为这是不可能的。 所以我去了打字稿文件：

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)}`;
    }

事件.ts：

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

我现在的问题是如何按日期对此事件进行排序。 在标准中，它按名称排序。 当我像我那样排序时，元素不会出现。 我认为问题在于事件的日期不是像 getDateString() 那样用“newDate”创建的。 我对打字稿不是很熟悉。 除了我已经尝试过的之外，在谷歌上也找不到任何东西。

如果有人能在这里帮助我，那就太好了。 如果你有问题，就问吧。

提前谢谢:)

Answer 1

这里可能是这种情况，运行时a.startDate和b.startDate的实际日期值是undefined 。

您可以尝试查看使用此方法时是否再次获得一些结果：

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...
  }
});