Angular 4 subscribe cannot assign the value

Question

log from web do not know why line 41 is undefined. just want to assign the value to the local variable "users". able to assign the value to a variable or log inside the subscribe function.

This is angular code:

export class UserProfileComponent implements OnInit {    

  id = '';
  users;

  constructor(private route: ActivatedRoute,
              private afs: AngularFirestore,
              private afsauth: AngularFireAuth,
              public Auth: AuthService) { }

  ngOnInit() {
    const collection: AngularFirestoreCollection<any> = this.afs.collection('users');

    // Notice how the observable is separated from write options
    const collection$: Observable<any> = collection.valueChanges();
    collection$.subscribe(data => console.log(data));
    this.getuid();
  }

  //this.user = this.afsauth.auth.currentUser
  getuid(){
    this.Auth.user.subscribe((data:any) => {
      this.users = data.uid;
      console.log(data);
      console.log(this.users);
    });

    console.log(this.users);
  }
}

Welcome to stackoverflow! It really helps us help you if you paste in the code as code, and not as an image. Thanks! — DeborahK
Welcome to stackoverflow! It would help if you specified the line that you are refering to because your code snippet only has 31 lines — Smokey Dawson

DeborahK DeborahK · Accepted Answer · 2018-03-14T22:34:59

I assume the problem line is here:

getuid(){
   this.Auth.user.subscribe((data:any) => {
      this.users = data.uid
      console.log(data)
      console.log(this.users)
   });

   console.log(this.users)   // <-- Line generating the error?
}

The reason for this is that when this code is executed, the subscribe is executed immediately and then the last console.log statement. At that point, this.users is undefined.

When the subscription emits a value, the code within the subscribe is executed. It is only then that the this.users property is set.

Angular 4 subscribe cannot assign the value

1 Answers