Угловое 6 Сортировка массива объекта по дате
Я пытаюсь сортировать объект массива по дате для моего приложения Angular 6. Данные имеют строковый формат. Интересно, существует ли существующий модуль для выполнения сортировки в Angular или нам нужно построить функцию сортировки в TypScript.
Угловой шаблон
<app-item *ngFor="let item of someArray"></app-item>
Массив
[
{
CREATE_TS: "2018-08-15 17:17:30.0",
Key1: "Val1",
Key2: "Val2",
},
{
CREATE_TS: "2018-08-15 17:25:30.0",
Key1: "Val1",
Key2: "Val2",
},
{
CREATE_TS: "2018-08-15 17:28:30.0",
Key1: "Val1",
Key2: "Val2",
}
]
Ответы
Ответ 1
в дополнение к загадочному ответу, вы, скорее всего, захотите обернуть отсортированные значения в accessor для включения в шаблон, добавив getter в свой тип машинописного текста:
public get sortedArray(): YourItemType[] {
return this.myArr.sort(...);
}
и в шаблоне:
<app-item *ngFor="let item of sortedArray"></app-item>
поочередно, вы можете отсортировать массив по мере его ввода в свой класс компонентов и сохранить отсортированную версию там, однако шаблон доступа может быть весьма полезен для динамической сортировки.
Ответ 2
Вы можете использовать функцию sort
для массивов, она принимает функцию сравнения. Разобрать строку Date в объект date и отсортировать по нему.
узнать больше о здесь
var myArr = [
{
CREATE_TS: "2018-08-15 17:17:30.0",
Key1: "Val1",
Key2: "Val2",
},
{
CREATE_TS: "2018-08-15 17:25:30.0",
Key1: "Val1",
Key2: "Val2",
},
{
CREATE_TS: "2018-08-15 17:28:30.0",
Key1: "Val1",
Key2: "Val2",
}
]
myArr.sort((val)=> {return new Date(val.CREATE_TS)})
по возрастанию
myArr.sort((val1, val2)=> {return new Date(val1.CREATE_TS) - new
Date(val2.CREATE_TS)})
нисходящий
myArr.sort((val1, val2)=> {return new Date(val2.CREATE_TS) - new
Date(val1.CREATE_TS)})
Ответ 3
Вы можете использовать Array.sort
для сортировки данных.
Я создал демо на Stackblitz. Я надеюсь, что это поможет/руководство для вас/других.
component.ts
data = [
{
CREATE_TS: "2018-08-15 17:17:30.0",
Key1: "Val1",
Key2: "Val2",
},
{
CREATE_TS: "2018-08-15 17:25:30.0",
Key1: "Val1",
Key2: "Val2",
},
{
CREATE_TS: "2018-08-15 17:28:30.0",
Key1: "Val1",
Key2: "Val2",
}
]
get sortData() {
return this.data.sort((a, b) => {
return <any>new Date(b.CREATE_TS) - <any>new Date(a.CREATE_TS);
});
}
component.html
<div *ngFor="let item of sortData">
{{item.Key1}} -- {{item.CREATE_TS}}
</div>
Ответ 4
Используя этот метод в Typescript, вы можете легко сортировать значения даты в любом порядке. Вы также можете отсортировать любой тип данных других типов, например число или строку, просто удалив новые методы Date() и getTime.
this.data.sort((a, b) => new Date(b.CREATE_TS).getTime() - new Date(a.CREATE_TS).getTime());
Ответ 5
Из просмотра документов, похоже, не существует встроенной сортировки массивов. Однако вы можете сделать это в своем шаблоне:
<app-item *ngFor="let item of someArray.sort(sortFunc)"></app-item>
А затем в файле component.ts определите функцию, потому что вы не можете определить функции в своем шаблоне:
sortFunc (a, b) {
return a.CREATE_TS - b.CREATE_TS
}
Редактировать: Саймон К указал, что формат строки позволяет прямое сравнение без принуждения к дате, а затем к числу. Мое исходное уравнение (для сценариев, где ваша строка даты не так удобна):
return new Date(a.CREATE_TS).getTime() - new Date(b.CREATE_TS).getTime()
Ответ 6
Для недавнего первого:
this.data.sort((a, b) => new Date(b.date1).getTime() - new Date(a.date1).getTime());
Для OlderFirst:
this.data.sort((b, a) => new Date(b.date1).getTime() - new Date(a.date1).getTime());