Wie kann ich die Prozess-Ergebnisse aus http.get() im Winkel 6/RxJS 6?

Ich versuche, ein upgrade einer Anwendung von Winkel 5 Winkel 6 und Schwierigkeiten haben, herauszufinden, wie man RxJS die neue syntax. Hier ist der code, den ich versuche zu migrieren:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class SearchService {
  constructor(private http: HttpClient) {}

  getAll() {
    return this.http.get('assets/data/people.json');
  }

  search(q: string): Observable<any> {
    if (!q || q === '*') {
      q = '';
    } else {
      q = q.toLowerCase();
    }
    return this.getAll().map((data: any) => {
      const results: any = [];
      data.map(item => {
        //check for item in localStorage
        if (localStorage['person' + item.id]) {
          item = JSON.parse(localStorage['person' + item.id]);
        }
        if (JSON.stringify(item).toLowerCase().includes(q)) {
          results.push(item);
        }
      });
      return results;
    });
  }

  get(id: number) {
    return this.getAll().map((all: any) => {
      if (localStorage['person' + id]) {
        return JSON.parse(localStorage['person' + id]);
      }
      return all.find(e => e.id === id);
    });
  }

  save(person: Person) {
    localStorage['person' + person.id] = JSON.stringify(person);
  }
}

Ich weiß, die Importe ändern sollte:

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

Und Sie sollen zur Verwendung pipe() statt map() jetzt, aber ich habe Probleme, herauszufinden, wie. Es wäre fantastisch, wenn es war so einfach, wie die folgenden, aber es scheint nicht zu sein.

    return this.getAll().pipe(
      map(data: any) => {
        const results: any = [];
        data.map(item => {
          //check for item in localStorage
          if (localStorage['person' + item.id]) {
            item = JSON.parse(localStorage['person' + item.id]);
          }
          if (JSON.stringify(item).toLowerCase().includes(q)) {
            results.push(item);
          }
        });
        return results;
    }));
  • Das ist das problem, das Sie stoßen mit diesem code?
  • Sie sollen nicht zu verwenden Rohr STATT mit Karte. Sie sollen weisen Sie die Zuordnungs- (und anderen) Betrieb(en) in (einer) variable(N) und setzen Sie die variable(N) in der Leitung.
  • Er ist mit Hilfe von pipe und Karte richtig hier, soweit ich das sehen kann. 😀 Sah den alten und den neuen code bis zu 15 mal und kann nicht sehen, nichts falsch mit dem neuen code. Was ist der Fehler???
  • Paar andere Dinge, die falsch sind, obwohl Sie nicht den code knacken: Mit Array.der Prototyp.Karte nicht wirklich anzeigen eines Arrays zu einem neuen array, sondern wie es mit forEach. Wahrscheinlich könnte man machen, der code sauberer, indem Sie einfach wieder das array.Karte Ergebnis gefiltert nach if item is in localStorage ersten.
  • Ich sehe es jetzt, eine fehlende Klammern 🙂
  • Ich habe es nochmal versucht und du hast Recht funkizer - es funktioniert! Weiß nicht, warum es nicht funktionierte früher.

InformationsquelleAutor Matt Raible | 2018-05-04
  1. 5

    Ihnen fehlt ein Klammern an map(data:any) => {}. Sollte dies funktionieren:

    return this.getAll().pipe(
    map((data: any) => {
        const results: any = [];
        data.map(item => {
            //check for item in localStorage
            if (localStorage['person' + item.id]) {
                item = JSON.parse(localStorage['person' + item.id]);
            }
            if (JSON.stringify(item).toLowerCase().includes(q)) {
                results.push(item);
            }
        });
        return results;
    }
    )
);

    Könnte man es machen, in eine besser lesbare und funktionelle Art und Weise, wie Sie diese - verwenden Sie die Array.der Prototyp.map-Funktion, für was es verwendet werden soll, und fügen Sie einen filter:

    return this.getAll().pipe(
    map(
        data => data
             .map(item => !!localStorage['person' + item.id]
                ? JSON.parse(localStorage['person' + item.id])
                : item)
             .filter(item => JSON.stringify(item).toLowerCase().includes(q))
    )
);
    InformationsquelleAutor funkizer
Schreibe einen Kommentar