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?
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!
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
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)
}
);
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:
comment obtenir la valeur actuelle de RxJS Sous réserve ou 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');
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
);
}