web-dev-qa-db-fra.com

Comment définir une valeur d'observable à une variable dans Angular 2

J'ai un UsernameService qui retourne un observable qui contient un objet JSON. Dans AnotherService, je veux injecter une valeur à partir de l'objet UsernameService.

Jusqu'à présent, je peux m'abonner à l'observable de UsernameService et je peux le montrer dans la console. Je peux même explorer et afficher l'une des valeurs de l'objet dans la console. Cependant, je ne comprends pas comment affecter cette valeur à une variable que je peux ensuite utiliser. Au lieu de cela, lorsque j'essaie d'attribuer la valeur à une variable, j'obtiens dans la console: Subscriber {closed: false, _parent: null, _parents: null...etc

Voici mon exemple où je montre avec succès la valeur observable dans la console:

import { UsernameService } from './username.service';
import { Injectable, OnInit } from '@angular/core';
import 'rxjs/Rx';

@Injectable()
export class AnotherService {

    username: any[] = [];

    constructor(private getUsernameService: UsernameService) { }

    someMethod() {
        let myFinalValue = this.getUsernameService.getUsername()
        .subscribe(username => console.log(username.data[0].AccountName));
    }
}

Le code ci-dessus a pour résultat que la console affiche correctement la valeur du champ AccountName que j'essaie d'attribuer à la variable myFinalValue. Cependant, je n'arrive pas à comprendre où je me trompe. 

Lorsque j'essaie d'utiliser la même technique pour obtenir simplement la valeur (au lieu de se connecter à la console), j'obtiens le générique: Abonné {closed: false, _parent: null, _parents: null... etc. comme je l'ai mentionné auparavant.

Voici un exemple de code qui génère mon erreur:

import { UsernameService } from './username.service';
import { Injectable, OnInit } from '@angular/core';
import 'rxjs/Rx';

@Injectable()
export class AnotherService {

    username: any[] = [];

    constructor(private getUsernameService: UsernameService) { }

    someMethod() {
        let myFinalValue = this.getUsernameService.getUsername()
        .subscribe(username => this.username = username.data[0].AccountName);
        console.log(queryAccountName);
    }
}

En fin de compte, mon objectif est d’attribuer simplement la valeur de username.data [0] .AccountName à la variable myFinalValue .

Merci d'avance pour votre aide!

angulartypescriptangular2-observables
5
Sol

Étant donné que votre appel est asynchrone (le rappel ne fonctionnera que s’il est terminé, vous ne savez pas quand), vous ne pouvez pas renvoyer de valeur à partir de l’appel asynchrone. Il vous suffit donc de l’affecter une fois l’appel terminéVous devez faire votre logique qui est liée à la username que vous obtenez dans la méthode subscribe. Vous devez créer un champ pour conserver la valeur de username pour une utilisation ultérieure dans la classe.

@Injectable()
export class AnotherService {

    username: any[] = [];
    myFinalValue: string;

    constructor(private getUsernameService: UsernameService) { }

    someMethod() {
        this.getUsernameService.getUsername()
        .subscribe(username => this.myFinalValue = username.data[0].AccountName));
    }
}
5
Suren Srapyan

Comme l'observable est asynchrone et que, comme le disait Suren, "le rappel ne fonctionnera que lorsqu'il sera terminé, vous ne saurez pas quand", je devais initialiser le code qui était abonné au premier service de mon composant ngOnInIt. À partir de là, je devais transmettre la valeur subscribe à la méthode du composant qui appelle en réalité le service subscribe en tant que paramètre.

Voici le composant de mon composant (vous pouvez voir la valeur this.username transmise à la méthode getCharges () sous la forme getCharges (accountName):

getCharges(accountName) {
  this.getChargesService.getCharges(accountName)
  .subscribe((charges) => {
      this.charges = charges.data;
      }, (error) => console.log(error) 
      )
  }


ngOnInit() {
this.getUsernameService.getUsername()
   .subscribe(username =>  { 
        this.username = username.data[0].AccountName;
        this.getCharges(this.username);
        })
   }

Ensuite, dans le fichier de service contenant le service/la méthode getUsernameService.getUsername (), j'ai facilement pu affecter le paramètre contenant la valeur souhaitée à une variable.

J'espère que cela pourra aider!

0
Sol