2
votes

Angular 7 Trier Observable.subscribe () par date?

Essayer de trier un tableau de données Observable.subscribe () retournées ... nouveau dans Angular 7. Je ne sais pas comment utiliser les méthodes RXJS ici, où je dois importer quoi, et comment trier le tableau de type Event.

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

}

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

EventsService.ts:

import {Event} from './Event';

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

EventsList.ts

import {Venue} from './Venue';

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

angular rxjs observable rxjs-pipeable-operators

0 commentaires

4 Réponses :

4
votes

Vous devrez le trier dans votre service et vous abonner au composant, ainsi votre service aura quelque chose comme,

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

puis,

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

2 commentaires

Battez-moi, gentil!

Je me sens stupide mais je n'arrive pas à faire fonctionner ça. EventResultsObj ajouté à la question d'origine, c'est peut-être le problème car j'obtiens toujours l'erreur "La propriété 'sort' n'existe pas sur le type 'EventsResultObj'". Je suppose que c'est parce que j'essaie de trier quelque chose qui n'est pas un tableau, mais je suis perdu ici. Aidez-moi! Merci.

3
votes

J'ajouterais une carte pour trier les événements directement dans la fonction getEvents de votre service. De cette façon, chaque classe utilisant le service obtiendra un observable de vos événements déjà triés:

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 commentaires

2
votes

En service, vous utilisez un tube et une carte!

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

}

Dans votre composant, utilisez subscribe!

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

0 commentaires

1
votes

Voici ma solution. J'utiliserais l'opérateur tap.

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 commentaires