Angular2/Typescript: access instance variable from the chaining observable function

Question

I'm using Angular2 with Typescript. Say I have a dummy login component and an authentication service to do token authentication. I'm going to set the authenticated variable in one of the map function as soon as I get the token from backend server.

The question is that I can't access the instance variable inside the chaining function. The this inside the chaining function is actually the subscriber of this observable. I know this's a scope issue but can't figure it out.

export class AuthenticationService {
authenticated:boolean = false; //this is the variable I want to access

constructor(public http: Http) {
    this.authenticated = !!sessionStorage.getItem('auth_token');
}

login(username, password) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    return this.http
      .post(
        'http://localhost:8080/token-auth',
        JSON.stringify({ username, password }),
        { headers }
      )
      .map(res => res.json())
      .map((res) => { 
        if (res) {
            this.authenticated = true;  //this is where I want to access the instance variable
            sessionStorage.setItem('auth_token', res.token);
        }

        return res;
      });
}

The dummy-login component where the above login() method is called is like this:

export class DummyLoginComponent {
  constructor(private auth: AuthenticationService, private router: Router) {
  }

  onSubmit(username, password) {

    this.auth.login(username, password).subscribe((result) => {
        if (result) {
            this.router.navigate(['Dashboard']);
        }
    })
  }
}

Not sure, but see if this helps: stackoverflow.com/a/34948742/215945 — Mark Rajcok
– Mark Rajcok, Commented Apr 14, 2016 at 21:10
@MarkRajcok not really, I have subscribed this observable inside another component. What I really want to do is to set the authenticated instance variable to true inside the .map() function. — Bing Lu
– Bing Lu, Commented Apr 14, 2016 at 21:16
Where's the code that invokes login? Either fix that code, or make login an arrow function — Ryan Cavanaugh
– Ryan Cavanaugh, Commented Apr 14, 2016 at 21:20
Why do you think it does not work? Arrow functions capture this from context. — kemsky
– kemsky, Commented Apr 14, 2016 at 21:20
debugger might be slightly off (wrong line due to sourcemaps), try to add logging for this.auth.authenticated in DummyLoginComponent. — kemsky
– kemsky, Commented Apr 14, 2016 at 21:39

Alex J · Accepted Answer · 2016-04-14 23:04:46Z

1

You can just subscribe to the observable instead of mapping it

login(username, password) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    let res = this.http
      .post(
        'http://localhost:8080/token-auth',
        JSON.stringify({ username, password }),
        { headers }
      )
      .map(res => res.json());
    res.subscribe(
      (res) => { 
            this.authenticated = true;  //this is where I want to access the instance variable
            sessionStorage.setItem('auth_token', res.token);
    });
    return res;
}

answered Apr 14, 2016 at 23:04

Alex J

3,1934 gold badges23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2/Typescript: access instance variable from the chaining observable function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related