Angular 7 Sort Observable.subscribe () по дате? - PullRequest
Новая
       20

Angular 7 Sort Observable.subscribe () по дате?

0 голосов
/ 16 февраля 2019

Попытка отсортировать массив возвращаемых данных Observable.subscribe () ... новинка в Angular 7. Я запутался в том, как использовать здесь методы RXJS, где мне нужно что-то импортировать и как отсортировать массивтип Event.

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?
  }

}

Ответы [ 4 ]

0 голосов
/ 26 июня 2019

Вот мое решение.Я бы использовал оператор крана. 

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))
}
0 голосов
/ 16 февраля 2019

Я бы добавил map для сортировки событий непосредственно в функции getEvents в вашем сервисе.Таким образом, каждый класс, использующий сервис, получит наблюдаемые уже отсортированные события: 

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()
    ))
  );
}
0 голосов
/ 16 февраля 2019

В сервисе вы используете pipe и map! 

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;
 });
0 голосов
/ 16 февраля 2019

Вам нужно будет отсортировать его в своем сервисе и подписаться в компоненте, чтобы ваш сервис имел что-то вроде 

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