Need help understanding why my Username property in my component is undefined?

Question

I am working with angular and my ngOnInit subscribes to data and sets it to my username property. What I do not understand is when I console.log(this.username) I will get undefined depending on what line of code I position the console log and I do not understand why it is doing this.

export class DashboardComponent implements OnInit {
  username: string;

  ngOnInit() {
    this.authService.getProfile().subscribe(profile => {
      this.username = profile.user.username;
      console.log(this.username); <============== works here
    },
    err => {
      console.log(err);
      return false;
    });

    this.getLists();
    console.log(this.username); <=========== get undefined here
  }    

  getLists(): void {
    console.log(this.username); <=========== get undefined here (need it to work here)
  }

  addList(newItem): void {
    console.log(this.username); <=========== works here
  }

My addList function is linked to an (onClick) event and the console log works here and when it is directly inside my subscribe function. But when when I tried to console log it inside my getList function or on the last line of my ngOnInit I get undefined and I do not understand why it is doing this? What am I missing?

That's because it's asynchronous-- it is being executed before `this.username` has been set — user184994, Jun 14 '18 at 20:09
Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) — JJJ, Jun 14 '18 at 20:12
ohhhh okay! Is there a way to get the console to work inside of my getList function without have to remove my getList call from the ngOnInit? @user184994 — Cuong Vo, Jun 14 '18 at 20:13
@CuongVo call your `getList` inside of `subscribe` or use some Rxjs Operators — Chau Tran, Jun 14 '18 at 20:13
Put the getList call inside the subscribe callback (the part that you've marked "works here"). — JJJ, Jun 14 '18 at 20:13
Yep, log it from within the subscribe callabck, but it looks like you're already doing that — user184994, Jun 14 '18 at 20:14
@CuongVo if you want to hide your component while the call is rolling, you can use *ngIf/else like this: https://stackblitz.com/edit/angular-sedhtj — aloisdg, Jun 14 '18 at 20:21

score 0 · Answer 1 · answered Jun 14 '18 at 20:33

You are not using it in async why

    export class DashboardComponent implements OnInit {
  username: string;

  ngOnInit() {
    this.authService.getProfile().subscribe(profile => {
      this.username = profile.user.username;
        this.getLists();
    },
    err => {
      console.log(err);
      return false;
    });

  }    

  getLists(): void {
     //  this function gonna activate after the http req is done 
    // gonna work here
  }

  addList(newItem): void {
  }

Its gonna work fine like that

Need help understanding why my Username property in my component is undefined?

1 Answers1