Angular 2 - variable not changing on IF statement

Hello,

I’m working on a login component and basically what it does is evaluates an array to determine if a user information found in the array or not and based on that results it displays a message example “user not found.”.

I have a IF statement to determine whether the array is empty or not and based on the evaluation the variable named userLoggedIn is changed to either true or false.

 **<div *ngIf="this.userLoggedIn"> User Not found </div>`,**
           providers: [UserLoginService]
})

export class UserLoginComponent{
    private foundUser: PersonType[];
    **private userLoggedIn=false;**
    
    loginForm: FormGroup;     

    constructor(public fb: FormBuilder, private _auth: UserLoginService, private _router: Router){
        this.loginForm = this.fb.group({
            userName: ['', Validators.required],
            password: ['', Validators.required] 
        });
    }// END constructor 

    onLoginSubmitBtn(value: any){
        this._auth.userAuthenticationMethod(value)
             .subscribe(
                  data => this.foundUser = data[0],
                  error => alert(error),
                  ()=> console.log(this.foundUser) );  

                   if(!this.foundUser){
                      this.userLoggedIn = true;                   
                    } 
                    else {
                        this.userLoggedIn = false;                        
                    }
                    console.log('userLoggedIn: ' + this.userLoggedIn);
                  //this._router.navigate(['dashboard']);  
                  //let link = ['/dashboard'];
  		         //  this.router.navigate(link);  		                
    }//END -onLoginSubmit

  1. initial start up i enter a valid user name. the IF statement evaluate and set userLoggedIN to FALSE. but in this case it changes to TRUE.

  2. sec test, I enter an non-existing user and it remains False. what should happen is change userLoggedIn to True but it reamins False.

  3. thired test, I again enter a non-exisitng user. the if statement evaluates this and change userLoggedIn value to True as it should be.

so whats going on in my first two tries… I have screenshot as to whats happening and how do i fix this?

One problem you have with your code is that your IF statement is outside of the subscribe() callbacks, so this.userLoggedIn is being evalutated before the authentication request has completed.

I’m not super familiar with Angular2’s observables, but I think what you want to do is move your IF check inside the 3rd callback:

onLoginSubmitBtn(value: any){
  this
    ._auth
    .userAuthenticationMethod(value)
    .subscribe(
      data => this.foundUser = data[0],
      error => alert(error),
      () => {
        console.log(this.foundUser)
        if (!this.foundUser) {
          this.userLoggedIn = true;                   
        } else {
          this.userLoggedIn = false;                        
        }
        console.log('userLoggedIn: ' + this.userLoggedIn);  
      }
    );                 
}
1 Like

Awesome, thanks Fretburner, it did the trick.
I spent a week trying to figure this out…lol

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.