web-dev-qa-db-fra.com

créer un <T> observable à partir du résultat

J'essaie Angular2.

J'ai remarqué que le service http utilise Observable objet au lieu de Promise (j'aime pas trop ce choix .. async/await arrivent).

À mon service, je télécharge une liste de Plants à partir du service Web. En cliquant sur une plante, je montre les détails en utilisant le routage. Mais de cette façon, lorsque je reviens en arrière, les plantes sont à nouveau téléchargées (car le constructeur est appelé à nouveau).

Pour éviter cela, je veux faire quelque chose comme:

public getPlants(): Observable<Plants[]>
{   
    if (this._plants != null)
        return Observable.fromResult (this._plants); //This method does not exists 

    return this._http.get('../../res/heroes.json')...
}

Y-a-t-il un moyen de faire ça? Comment puis-je importer la classe Observable dans mon fichier ts?

Merci!

typescriptangularobservablerxjs
30
user3471528

La méthode dans TypeScript (ou JavaScript) est appelée of . Learn rxjs a aussi un bon tutoriel

Si vous utilisez rxjs6 , vous obtenez tout de rxjs

import { Observable, of } from 'rxjs';

public getPlants(): Observable<Plant[]> {
  const mocked: Plant[] = [
    { id: 1, image: 'hello.png' }
  ];
  // returns an Observable that emits one value, mocked; which in this case is an array,
  // and then a complete notification
  // You can easily just add more arguments to emit a list of values instead
  return of(mocked);
}

Dans la version précédente, vous importiez l'opérateur de d'un autre endroit

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

public getPlants(): Observable<Plant[]> {
  const mocked: Plant[] = [
    { id: 1, image: 'hello.png' }
  ];
  return of(mocked);
}

Et avant cela, vous l'avez importé en tant qu'extension de la classe Observable

import { Observable } from "rxjs/Observable";
import 'rxjs/add/observable/of';

public getPlants(): Observable<Plants[]> {
    // this can be changed to a member variable of course
    let mocked: Plants[] = [{
        id: 1,
        image: "hello.png"
    }];
    return Observable.of(mocked);
}
44
Patrick

Ceci est ma solution de travail:

if (this._heroes != null && this._heroes !== undefined) {
    return Observable.create(observer => {
        observer.next(this._heroes);
        observer.complete();
    });
}

J'espère que c'est la meilleure solution.

26
user3471528