Variable assigned inside subscribe is empty outside subscribe?

Question

Variable assigned inside subscribe is empty outside subscribe? why? I know that susbcribe is asynchronous, but, I don't know how await to render this var... please somebody help me and explain to me. I'm trying to get the value of a subscribe, to then render it in the html, but the value is only retrieved inside the subscribe event and not outside. What can I do to have it in the rest of the component. Thank you.

My service;

import { Injectable } from '@angular/core';
import { Api } from 'src/app/services/api.service';
import { environment as env } from 'src/environments/endpoints';
import { ICode } from '../components/login/login.interfaces';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

private rol$: Subject<any>            

  constructor(
    private api: Api,
  ) {
    this.rol$ = new Subject()
  }

  async verifyCode(data: ICode) {
    const res = await this.api.post(env.auth.login, data)
      .then((res) => {
        if (!res.error) {
          this.isAuthenticated = res.isAuth 
          this.setRol(res.rolUser)           
        }
      })
      .catch((err) => {
        console.log(err)
        return false
      })

    return this.isAuthenticated
  }

  getRolUser$(): Observable<any> {
    return this.rol$.asObservable()
  }

  setRol(rolUser: any) {
    this.rol$.next(rolUser)
  }


}

} My component;

import { AuthService } from 'src/app/services/auth.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-panel-widgets',
  templateUrl: './panel-widgets.component.html',
  styleUrls: ['./panel-widgets.component.scss']
})
export class PanelWidgetsComponent implements OnInit {

  rolUser$: Observable<any>;

  constructor(
    private _auth : AuthService,
  ) { 
    }

  ngOnInit(){

    this._auth.getRolUser$().subscribe(e => this.rolUser$ = e)       
    
    console.log('Valor del subscribe __ ', this.rolUser$)    
 }

}

Html template

<p class="text">
     <span><b>Usuario : </b><p style="right: 0px;">{{usuario}}</p></span>
     <span><b>Email : </b>{{email}}</span>
     <span><b>Rol : </b>{{ rolUser$ | async }}</span>
 </p>

score 0 · Answer 1 · answered May 11 '23 at 19:37

Put a console.log inside your subscribe callback and you'll notice that it'll be logged after the log outside of the subscription. Those 2 paths don't run sync.

You could look up Promises and how to use async/await as well as the Documentation of rxjs

Also, if you want to use the async pipe, there's no need to set the value inside the subscription itself

In you TS do something like this:

public rolUser$: Observable<any> = this._auth.getRolUser$()

and with that, you have the Observable ready to go into your async pipe, just like you're already doing

<span><b>Rol : </b>{{ rolUser$ | async }}</span>

Thank for your response, I try that but not workin yet... @RenoKK — AlJw, May 11 '23 at 19:49

score -1 · Answer 2 · answered May 11 '23 at 20:55

Finally, this works:

Service

  import { BehaviorSubject, Observable } from 'rxjs';

  isAuthenticated: Boolean = false
  private rol$ = new BehaviorSubject<string>('');  

  constructor(
    private api: Api,
  ) {
  }

I use BehaviorSubject instead Subject

And in my component:

public rolUser$: Observable<any> | undefined;

ngOnInit() {
    this.rolUser$ = this._auth.getRolUser()
}

and template html;

<span><b>Rol : </b>
    {{ rolUser$ | async }}
</span>

Variable assigned inside subscribe is empty outside subscribe?

2 Answers2

Linked