Angular 7 按日期排序 Observable.subscribe()？答案

【问题标题】：Angular 7 Sort Observable.subscribe() by date?Angular 7 按日期排序 Observable.subscribe()？
【发布时间】：2019-02-16 17:05:07
【问题描述】：

尝试对返回的 Observable.subscribe() 数据数组进行排序... Angular 7 的新手。我对如何在这里使用 RXJS 方法、我需要在哪里导入什么以及如何对数组进行排序感到困惑输入事件。

Event.ts

import {Venue} from './Venue';

export class Event {
  id: number;
  url: string;
  date: string;
  venue_id: number;
  venue: Venue;
}

EventResultObj.ts

import {Event} from './Event';

export interface EventResultObj {
  count: number;
  next?: any;
  previous?: any;
  results: Event[];
}

EventsService.ts：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Event } from '../models/Event';
import {Observable} from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class EventsService {
  eventsUrl = 'http://localhost:4200/assets/tempData/events.json';
  constructor(  private http: HttpClient) { }

  getEvents(): Observable<EventResultObj> {    
    return this.http.get<EventResultObj>(this.eventsUrl).pipe(
          /// CANNOT FIGURE OUT HOW TO GET A SORT FUNCTION TO WORK HERE 
          /// WITH THE OBSERVABLE
    )
  }
}

EventsList.ts

import {Component, OnInit} from '@angular/core';
import {EventsService} from '../../services/events.service';

@Component({
  selector: 'app-buyer-events-list',
  templateUrl: './buyer-events-list.component.html',
  styleUrls: ['./buyer-events-list.component.scss']
})
export class BuyerEventsListComponent implements OnInit {

  constructor(private eventsService: EventsService) {
  }

  events;

  ngOnInit() {
    this.eventsService.getEvents().subscribe(events => this.events = events); // OR DO I ADD A PIPE OR MAP HERE AND HOW DO I DO IT?
  }

}

【问题讨论】：

标签： angular rxjs observable rxjs-pipeable-operators

【解决方案1】：

您需要在您的服务中对其进行排序并在组件中订阅，这样您的服务就会有类似的东西，

 getEvents(): Observable<Event[]> {    
    return this.http.get<Event[]>(this.eventsUrl).pipe(
        map(events => events.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()))
    ) ;
  }

然后，

 ngOnInit() {
    this.eventsService.getEvents().subscribe(events => this.events = events); 
  }

【讨论】：

打败我，太好了！
我觉得自己很笨，但无法让它发挥作用。在原始问题中添加了 EventResultsObj，也许这就是问题所在，因为我不断收到错误消息“'EventsResultObj' 类型上不存在属性 'sort'”。我假设这是因为我试图对不是数组的东西进行排序，但我在这里迷路了。帮助！谢谢。

【解决方案2】：

我会添加一个map 以直接在您服务的getEvents 函数中对事件进行排序。这样，使用该服务的每个班级都将获得已排序的事件的 observable：

import { map } from 'rxjs/operators';

getEvents(): Observable<Event[]> {    
  return this.http.get<Event[]>(this.eventsUrl).pipe(
    map(events => events.sort((a: Event, b: Event) =>
      (new Date(a.date)).getTime() - (new Date(b.date)).getTime()
    ))
  );
}

【讨论】：

【解决方案3】：

在服务中你使用管道和地图！

public getEvents(): Observable<any> {
    return this.http.get(this.eventsUrl).pipe(map(response => response));

}

在您的组件中使用订阅！

this.eventsService.getEvents()
 .subscribe(events => {
   console.log(events); // Example
 }, err => {
   throw err;
 });

【讨论】：

【解决方案4】：

这是我的解决方案。我会使用点击运算符。

const  sortById = function(data) {
  data.sort((a,b) => data.id - data.id);
};


getEvents(): Observable<Event[]> {    
  return this.http.get<Event[]>(this.eventsUrl)
    .pipe(tap(sortById))
}

【讨论】：