Angular 8: Observable.subscribe Делает мой класс пользователя пустым

Question

Я новичок в Angular. Я звоню в API

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

и формирую класс репозитория. Я звоню

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;
}

Может ли кто-нибудь помочь, пожалуйста ...

Answer 1

Он асинхронный, поэтому вы должны поместить его в блок подписки. Невозможно назначить его за пределами блока, так как подписка не ждет и продолжается. Вот почему он не определен.

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

Обычно asyn c данные обрабатываются так:

TS

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

HTML

{{ GetUserDetailsfromID() | async }}

Я настоятельно рекомендую вам взглянуть на вводную страницу rx js:

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

Answer 2

HttpCall является асинхронным, то есть вы получите результат только после его подписки, а не за пределами блока

Answer 3

Спасибо всем за публикацию ваших ответов. Моя проблема под кодом ниже

'

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

'

и в конструкторе я вызываю как показано ниже

'

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);
  }

'

Я не знаю, это лучший способ, но сейчас это решает мою проблему ...

Еще раз спасибо за ваше драгоценное время

С уважением,

Answer 4

Это из-за того, что this.userresp загруженное значение не определено, и оно вызывается первым, прежде чем будет вызван любой .subscribe() ... поэтому вы должны поместить свой код таким образом на этапе завершения подписки ...

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;                 
          });
}