Угловая 5 сортировка по дате

Question

У меня есть таблица уроков, и я хотел бы заказать их по дате.Поскольку в Angular 5 нет конвейера orderBy, и все найденные мной решения могут быть применены только к числам и строкам, я был бы признателен, если бы кто-то мог помочь мне в этом.Это тело моей таблицы

<tbody>
  <tr *ngFor="let lesson of lessons">
    <th scope="row">{{lesson.date | date:'dd.MM.yyyy H:mm'}}</th>
    <td>{{lesson.address.locationName}}</td>
    <td>{{lesson.topic}}</td>
    <td>{{lesson.homework}}</td>     
  </tr>
</tbody>

, а это фрагмент моего файла component.ts

public lessons = [];

ngOnInit() {
this.localStorage.getItem<number>('selectedProfileId').subscribe((id) => {
     this._profileService.showLessons(id)
     .subscribe(data => this.lessons = data,
     );
   });     
 } 

Answer 1

Сортировка lessons с использованием Array.prototype.sort () в классе компонентов перед подпиской / привязкой lessons.Вот как вы можете отсортировать lessons, поступающий из вашего сервиса до привязки, используя оператор RxJS map() в порядке убывания.map() действительно мощно с точки зрения преобразования потоков данных до subscribe().

this._profileService.showLessons(id)
    .pipe(
        map(lessons => lessons.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()))
    )
    .subscribe(lessons => this.lessons = lessons);

В зависимости от ваших настроек / конфигурации TsLint, вам может потребоваться использовать getTime() для успокоения компилятора:

lessons.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())

Вот StackBlitz , показывающий основные функциональные возможности в действии.

Примечание * - pipe() используется с RxJS 5.5+ .Если вы используете старую версию RxJS, вы можете просто импортировать map() напрямую и использовать ее следующим образом:

this._profileService.showLessons(id)
    .map(lessons => lessons.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()))
    .subscribe(lessons => this.lessons = lessons);

Надеюсь, это поможет!

Спасибо!