0
votes

Angular 8: Observable.subscribe Rend ma classe d'utilisateurs vide

Je suis nouveau sur Angular. Je fais un appel à l'API

GetUserDetailsfromID(id:number) {   
    this.dataSource.GetUserDetailsfromID(id).subscribe( x => {
           this.userresp = x;
           console.log(this.userresp);//**Here i am  able to view data**
         });
     var data = this.userresp; 
     console.log(data); //**but this becomes undefined always**
     return  this.userresp;
}

et forme une classe de référentiel Je fais un appel

GetUserDetailsfromID(id:number):Observable<UserResponse> {
    let token = localStorage.getItem("userToken");        
    return this.http.get<UserResponse>(this.baseUrl + "Users/GetById/" + id, this.getOptions());
}

Est-ce que n'importe quel organisme peut aider s'il vous plaît ...

angular angular8

2 commentaires

Est-ce que cela répond à votre question? S'abonner à observable revient indéfini

Est-ce que cela répond à votre question? Angulaire 8 Comment obtenir de la valeur d'observable dans ngOnInit et comment se comportent-ils

4 Réponses :

1
votes

Http Call est asynchrone, vous n'obtiendrez le résultat qu'après l'avoir abonné, pas en dehors du bloc

1 commentaires

après m'être abonné aussi, je reçois une classe userresp vide

0
votes

C'est à cause du moment où this.userresp a chargé la valeur est indéfini et il est appelé avant tout .subscribe () est appelé ... vous devez donc mettre votre code comme celui-ci à l'étape d'achèvement de l'abonnement ...

GetUserDetailsfromID(id:number) {   
    this.dataSource.GetUserDetailsfromID(id).subscribe( x => {
            this.userresp = x;
            console.log(this.userresp);//**Here i am  able to view data**
         },

         (err) => {}, // Error Stage...

         () => {  // Completion stage is gets called when observable completes.
                  var data = this.userresp; 
                  console.log(data); //**but this becomes undefined always**
                  return  this.userresp;                 
          });
}

3 commentaires

Merci gaurang .. mais je ne suis toujours pas capable d'obtenir des données dans mon composant du référentiel

à quoi servent les var data ?

rien que de vérifier ce que je reçois ne sera consolé ou non

2
votes

Il est asynchrone, vous devez donc le mettre dans le bloc d'abonnement. Il n'est pas possible de l'attribuer en dehors du bloc, car l'abonnement n'attend pas et continue. C'est pourquoi il n'est pas défini.

{{ GetUserDetailsfromID() | async }}

Généralement, les données asynchrones sont gérées comme suit:

GetUserDetailsfromID(id:number): Observable<any> {   
    return this.dataSource.GetUserDetailsfromID(id);
}

HTML

GetUserDetailsfromID(id:number) {   
    this.dataSource.GetUserDetailsfromID(id).subscribe(x => {
        this.userresp = x;
        console.log(this.userresp);
        var data = this.userresp; 
    });
}

Je vous recommande vivement de jeter un œil à la page d’introduction de rxjs:

https://rxjs-dev.firebaseapp.com/guide/overview

0 commentaires

0
votes

Merci à tous d'avoir publié vos réponses Mon problème est résolu par le code ci-dessous

async getuserdata()
  {
    this.userid = localStorage.getItem("userid")

    this.data = await this.repo.GetUserDetailsfromID(Number(this.userid))
    this.user.Id = this.data["id"];
    this.user.FirstName = this.data["firstName"];
    this.user.LastName = this.data["lastName"];
    this.user.Username = this.data["username"];
    this.user.Mobilenumber = this.data["mobilenumber"];

    console.log(this.user);
  }

et dans le constructeur, j'appelle comme ci-dessous

' p>

public GetUserDetailsfromID(id:number): Promise<any>
    {   
        return this.dataSource.GetUserDetailsfromID(id).toPromise();
    }

Je ne le sais pas de la meilleure façon mais cela résout mon problème pour le moment ...

Merci encore pour vous temps précieux

Cordialement,

1 commentaires

Cela bloquera votre fil. Plus tard, lorsque votre application se développera, cela apportera une mauvaise expérience utilisateur lorsque l'application se bloque pendant le chargement.