web-dev-qa-db-fra.com

Angular 6 observables - extrayez des données de la fonction .subscribe () et utilisez-les ailleurs

Je frappe ma tête contre le mur avec des observables. Presque toute la documentation que je peux trouver est dans l'ancienne syntaxe rxjs. 

J'ai un appel API qui est un observable. Je l'appelle ailleurs et je m'y abonne - j'essaie de renseigner une table avec les données de cette requête GET.

Si je simplement console.log ma fonction getData, il enregistre l'abonnement plutôt que mes données. Je peux réussir à console.log data dans la fonction .subscribe, mais je souhaite utiliser data en dehors de .subscribe().

Comment extraire data de la fonction .subscribe() et l'utiliser ailleurs? Ou bien toute ma logique doit-elle être contenue dans la fonction .subscribe() pour pouvoir utiliser data?

getData2() {
    return this.m_dbService.get('api/myApiPath').subscribe(
        data => (console.log(data)), //This properly logs my data. How to extract `data` out of here and actually use it?
        error => { throw error },
        () => console.log("finished")
    );
}

workbookInit(args){
     var datasource = this.getData2();   // this returns the subscription and doesn't work.
}
angularasynchronousrxjsobservablesubscribe
2
Kyle Vassella

il suffit de renvoyer la requête HTTP à partir de getData() et de la souscrire dans la fonction workbookInit.

getData2() {
    return this.m_dbService.get('api/myApiPath')
}

workbookInit(args){
    this.getData2().subscribe(
        data => {
           var datasource = data 
        }, 
        error => { throw error },
        () => console.log("finished") 
}
2
Sachila Ranawaka

Ce que vous voulez probablement faire est de renseigner une autre Observable avec les données afin de pouvoir y accéder ailleurs dans votre projet sans avoir à appeler l'API plusieurs fois.

Pour ce faire, vous créez ce que l'on appelle une Subject (dans ce cas une BehaviorSubject) et vous pouvez la remplir avec des données lorsque votre appel d'API renvoie une réponse.

Ensuite, pour accéder à ces données ailleurs, vous pouvez créer une fonction "get" pour renvoyer la Subject (qui est elle-même une Observable) chaque fois que vous avez besoin des données.

Voici un exemple:

my-data.service.ts

myData: BehaviorSubject<number> = new BehaviorSubject<number>(0);

callApi() {
    this.dbService.get('apiUrl').subscribe(
        (data) = > { this.myData.next(data) // Assuming data is a 'number' }
    );
}

getMyData() {
    return this.myData.asObservable();
}

Maintenant, pour utiliser ceci dans un composant:

this.myService.getMyData().subscribe(
    (data) => { /* Use the value from myData observable freely */ }
);

Ou vous pouvez utiliser le Angular async pipe (qui est une méthode très pratique pour traiter les observables dans votre code).

3
Tim Klein

Vous ne devriez pas souscrire à la Observable dans getData2. Renvoyez-le tel quel à la place, puis procédez comme suit:

var dataSource;
this.getData2().subscribe(res => dataSource = res);

Veuillez noter que la variable dataSource sera définie à la fin de la demande (de manière asynchrone), vous ne pourrez donc pas l'utiliser immédiatement dans la même étendue de bloc.

Si vous souhaitez l'utiliser immédiatement, insérez votre code dans l'abonnement.

1
YoukouleleY

Si vous avez un observable qui fournit des données pour renseigner une table, le mieux est de ne pas utiliser subscribe(), mais d'utiliser l'observable directement dans votre modèle html à l'aide du tube async. Vous aurez moins de soucis et votre code sera beaucoup plus simple.

0
edwin