Comment rendre la valeur de la fonction qui a l'abonnement Observable à l'intérieur?

Je ne sais pas comment extraire la valeur de Observable pour la retourner par la fonction dans laquelle Observable est présent. J'ai juste besoin d'une valeur à renvoyer, rien d'autre.

version actuelle qui fonctionne

function getValueFromObservable() {
    this.store.subscribe(
        (data:any) => {
            console.log(data)
        }
    )
}
getValueFromObservable()

j'ai besoin de cela pour travailler, fonction pour retourner la valeur, et puis:

function getValueFromObservable() {
    this.store.subscribe(
        (data:any) => {
            return data
        }
    )
}
console.log(getValueFromObservable())

Qu'est-ce que je fais de mal ici?

44
demandé sur jonrsharpe 2016-07-10 15:18:34

6 réponses

je me rends compte que cette Question était il y a un certain temps et vous avez sûrement une bonne solution maintenant, mais pour quiconque cherche ceci je suggérerais de la résoudre avec une promesse de garder le motif async. Une version plus verbeuse créerait une nouvelle promesse:

function getValueFromObservable() {
    return new Promise(resolve=>{
        this.store
         .take(1) //useful if you need the data once and don't want to manually cancel the subscription again
         .subscribe(
            (data:any) => {
                console.log(data;
                resolve(data);
         })
    }
}

du côté de la réception vous aurez alors "attendre" pour la promesse de résoudre avec quelque chose comme ceci:

getValueFromObservable()
   .then((data:any)=>{
   //... continue with anything depending on "data" after the Promise has resolved
})

une solution plus mince utiliserait RxJS" .toPromise () au lieu de:

function getValueFromObservable() {
    return this.store
       .take(1)
       .toPromise()   
}

le côté récepteur reste le même que ci-dessus bien sûr. Espérons que ça aide!

18
répondu jparg 2017-02-12 08:15:57

ce n'est pas exactement l'idée correcte d'utiliser Observable

dans le composant vous devez déclarer un membre de classe qui tiendra un objet (quelque chose que vous allez utiliser dans votre composant)

export class MyComponent {
  name: string = "";
}

puis un Service vous retournera un Observable :

getValueFromObservable():Observable<string> {
    return this.store.map(res => res.json());
}

Component devrait se préparer à pouvoir en extraire une valeur:

OnInit(){
  this.yourServiceName.getValueFromObservable()
    .subscribe(res => this.name = res.name)
}

Vous devez attribuer une valeur d'une Observable à une variable:

et votre modèle consommera la variable name :

<div> {{ name }} </div>

une autre façon d'utiliser Observable est par async pipe http://briantroncone.com/?p=623

Note : si ce n'est pas ce que vous demandez, veuillez mettre à jour votre question avec plus de détails

14
répondu Andrei Zhytkevich 2016-07-10 12:45:19

si vous souhaitez pré-souscrire à la même Observable qui vous sera retournée, il vous suffit d'utiliser

.do ():

function getValueFromObservable() {
    return this.store.do(
        (data:any) => {
            console.log("Line 1: " +data);
        }
    );
}

getValueFromObservable().subscribe(
        (data:any) => {
            console.log("Line 2: " +data)
        }
    );
7
répondu Dudi 2017-09-13 08:30:00

le problème est que les données sont capturées à l'intérieur de l'observable et je peux juste les enregistrer sur la console. Je veux le retour de la valeur et de la console.journal ou que ce soit à partir de fichiers différents, par l'appel de la fonction dans laquelle il réside.

semble comme vous êtes à la recherche d'un" valeur actuelle " getter à l'intérieur d'un observable, quand il émet et après une émission.

Subject et Observable n'a pas une telle chose. Lorsqu'une valeur est émis, il est passé à ses abonnés et le Observable est fait avec elle.

vous pouvez utiliser BehaviorSubject qui stocke la dernière valeur émise et l'émet immédiatement aux nouveaux abonnés.

il a aussi une méthode getValue() pour obtenir la valeur courante;

Autre Lecture:

Rxjs BehaviorSubject

comment obtenir la valeur actuelle de RxJS Sous réserve ou Observables?

4
répondu A. Alencar 2018-08-23 18:45:33
Les valeurs observables

peuvent être récupérées à partir de n'importe quel endroit. La séquence source est d'abord poussé sur un observateur spécial qui est capable d'émettre ailleurs. Ceci est réalisé avec la classe "Subject class des extensions réactives (RxJS).

var subject = new Rx.AsyncSubject();  // store-last-value method

stocker la valeur sur le observer .

subject.next(value); // store value
subject.complete(); // publish only when sequence is completed

pour récupérer la valeur ailleurs, abonnez-vous à l'observateur comme suit:

subject.subscribe({
  next: (response) => {
      //do stuff. The property name "response" references the value
  }
});

les sujets sont à la fois Observables et observateurs. Il existe d'autres "Subject types tels que BehaviourSubject et ReplaySubject pour d'autres scénarios d'utilisation.

n'oubliez pas d'importer des RXJ.

var Rx = require('rxjs');
1
répondu Pageii Studio 2017-02-16 01:00:47

par exemple ceci est mon modèle html:

<select class="custom-select d-block w-100" id="genre" name="genre"
                  [(ngModel)]="film.genre"
                  #genreInput="ngModel"
                  required>
            <option value="">Choose...</option>
            <option *ngFor="let genre of genres;" [value]="genre.value">{{genre.name}}</option>
          </select>

C'est le champ qui s'est lié avec le modèle de mon composant:

  // Genres of films like action or drama that will populate dropdown list.
  genres: Genre[];

je récupère les genres de films de server dynamiquement. Pour communiquer avec le serveur j'ai créé FilmService

c'est la méthode qui communique serveur:

 fetchGenres(): Observable<Genre[]> {
    return this.client.get(WebUtils.RESOURCE_HOST_API + 'film' + '/genre') as Observable<Genre[]>;
  }

pourquoi cette méthode retourne Observable<Genre[]> pas quelque chose comme Genre[] ?

JavaScript est async et il n'attend pas une méthode pour retourner la valeur après un processus coûteux. Avec coûteux, je veux dire un processus qui prend un certain temps pour rendre la valeur. Comme l'extraction de données à partir du serveur. Ainsi ,vous devez référence de retour de Observable et l'abonner.

par exemple dans mon composant:

ngOnInit() {
    this.filmService.fetchGenres().subscribe(
      val => this.genres = val
    );
  }
-1
répondu Muhammed Ozdogan 2018-08-07 12:17:34