web-dev-qa-db-fra.com

Angular Comment filtrer les données d'un observable à l'aide du tuyau rxjs

J'appelle une méthode appelée getWorkOrders () dans mon fichier de service, qui à son tour appelle le serveur pour récupérer les enregistrements.

Voici mon service. J'utilise le nouveau HttpClient.

export class BackendServices {
  private BASE_URL ='http://localhost:3000/backend';
  constructor(private http: HttpClient) {}
  getWorkOrders(){
    return this.http.get(this.BASE_URL + '/getworkorders/');
 }
}

Fichier Component.ts

private woSubject = new BehaviorSubject<IWorkOrders[]>([]);
    getWorkOrders() {
        this.bs.getWorkOrders()
          .subscribe((data: any) =>
            this.woSubject.next(data),
        );
      }

À partir de la méthode getWorkOrders du composant, comment filtrer les données de tous les enregistrements extraits du serveur. Je comprends qu’il utilise les opérateurs pipe & the filter rxjs, mais je ne sais pas comment le mettre ensemble.

 enter image description here

angularrxjs6
5
Sumchans

Si vous souhaitez filtrer les commandes en provenance du serveur à l'aide d'un filtre rxjs, vous devez transformer le tableau de commandes en observable, par exemple. 

export class BackendServices {
    private BASE_URL ='http://localhost:3000/backend';
    constructor(private http: HttpClient) {}

    getWorkOrders(){
        return this.http.get(this.BASE_URL + '/getworkorders/')
                   .pipe(map((data) => Observable.from(data));
    }
}

private woSubject = new BehaviorSubject<IWorkOrders[]>([]);
    getWorkOrders() {
        this.bs.getWorkOrders()
          .pipe(
              filter(data => data.timestamp > 123456786 ),
              toArray()
           )
          .subscribe((data: any) =>
               this.woSubject.next(data),
           );
        }

L'alternative consiste simplement à filtrer le tableau dans une carte en utilisant le filtre de tableau standard, par exemple.

export class BackendServices {
    private BASE_URL ='http://localhost:3000/backend';
    constructor(private http: HttpClient) {}

    getWorkOrders(){
        return this.http.get(this.BASE_URL + '/getworkorders/');
    }
}

private woSubject = new BehaviorSubject<IWorkOrders[]>([]);
    getWorkOrders() {
        this.bs.getWorkOrders()
          .pipe(map(data => data.filter(workorder => workrder.timestamp > 123456786) )
          .subscribe((data: any) =>
               this.woSubject.next(data),
           );
        }

Une question que je voudrais demander est pourquoi vous insérez le résultat de l'abonnement observable dans le sujet du comportement? En règle générale, si vous insérez les résultats d'un abonnement dans un autre observable, vous pouvez obtenir le même résultat en combinant des observables.

6
glendaviesnz

Cela a fonctionné pour moi. Cependant, assurez-vous d'utiliser la bonne carte. J'ai initialement importé le mauvais. Tu veux:

import { map } from rxjs/operators;
0
Nabsta