Angular 4 constructor value used on *ngIf

Question

In the following typescript code I have a value moreinfo which I initialize to 1. After that inside the constructor I change the value to 2. So with value 1 I display one div with *ngIf and with value 2 I display a different div. All works perfectly and I see that the value has correctly changed to 2 from console.

export class LoginComponent implements OnInit {
  moreinfo: number=1;
  email: string;
  password: string;

  constructor(public afAuth: AngularFireAuth, public af: 
    AngularFireDatabase,public authService: AuthService) {

    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        this.moreinfo=2;
        var user2 = firebase.auth().currentUser;
        console.log("Current user id:" + user2.uid + "\nMoreinfo:" + this.moreinfo);
      } else {
        console.log("No user is signed in."); 
      }
    });
  }
}

However when I compare the value in the HTML it displays the div with morevalue == 1; despite the fact that the value has changed to 2. Is there anyone that can shed some light on my problem?

<div class="container" *ngIf="moreinfo == 1">
  <h1 *ngIf="authService.user | async">Welcome {{ (authService.user | async)?.email }}!</h1>
</div>

<div class="container" *ngIf="moreinfo == 2">
  something
</div>

You said that you change the value to 2. But I don't see that anywhere. It looks like you initialize it to 1 and you also set it to 1 in the constructor. Is this right? — Jake Smith, Jul 22 '17 at 23:10
When I use the value moreinfo on *ngIf it always show the div with ngIf="moreinfo==1" and the value has changed to 2. Is there any way I can control it? — Vasilis Michail, Jul 22 '17 at 23:13
Yes sorry while I was testing the code I forgot to change the value to 2. I edited my post now — Vasilis Michail, Jul 22 '17 at 23:15
So you now explicitly set it to 2 when you have a user, but still get the scenario with no user. Are you sure that user exists? — Kyle Richardson, Jul 22 '17 at 23:17

score 1 · Accepted Answer · answered Jul 22 '17 at 23:20

1

I think it is because the closure that you are using is incorrect, instead of an anonymous function, try an arrow function, which should set the value in the component - not just in the function.

Like this:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    this.moreinfo=2;
    var user2 = firebase.auth().currentUser;
    console.log("Current user id:" + user2.uid + "\nMoreinfo:" + this.moreinfo);
  } else {
    console.log("No user is signed in."); 
  }
});

answered Jul 22 '17 at 23:20

0mpurdy

3,198
1
19
28

Wow that worked! Thanks you very much.. so the problem was that the value moreinfo was only changed localy inside the function and outside was still 1?? – Vasilis Michail Jul 22 '17 at 23:24
exactly! if you'd tested it with `console.log()` outside of that function it would have still been 1 – 0mpurdy Jul 22 '17 at 23:25
Ah nice.. thanks you so much for the help :) – Vasilis Michail Jul 22 '17 at 23:28

Angular 4 constructor value used on *ngIf

1 Answers1