Угловое 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());