javascript - Angular 2 Service Singleton Scoping Problems -

i have angular 2 service can't seem working correctly. reason scoping on this isn't expect be. i'm using fat arrows, should keep things scoped correctly i'm not sure wheels falling off.

the service

declare const trello: any;  import { injectable } '@angular/core'; import { http, response } '@angular/http';  @injectable() export class trelloservice {     key: string = 'test';     token: string = 'test';     boards: = [];      constructor(private http: http) {         console.log('initializing trelloservice.  should see me once.');     }      getopenboards(): promise<void> {         // 'this' null here.  no scope @ all???         const url = `https://api.trello.com/1/member/me/boards?key=${this.key}&token=${this.token}`;         return this.http.get(url)             .topromise()             .then((response: response) => {                 debugger;                 this.boards = response.json();             });     } } 

the component below calls getopenboards on service. when does, this null. screams "crazy javascript scoping problem", have no idea it. need bind everywhere? if so, how component?

the component

import { component } '@angular/core'; import { router } '@angular/router'; import { catchflyservice } '../../services/catchfly.service'; import { trelloservice } '../../services/trello.service';  declare var trello: any;  @component({     selector: 'step-fetch-data',     templateurl: './fetchdata.component.html',     styleurls: ['./fetchdata.component.scss'] }) export class fetchdatacomponent {     showerror: boolean = false;      constructor(private trelloservice: trelloservice,                 private catchflyservice: catchflyservice,                 private router: router) {          this.catchflyservice.getprojects()             .then(this.trelloservice.getopenboards)             .then(this.trelloservice.getalllists)             .then(() => {                 console.log('finished getting projects, boards, , lists');             })             .catch((err) => {                 console.log(err);                 console.log('service rejected');             });     } } 

when you're calling then function do:

this.catchflyservice.getprojects()   .then(this.trelloservice.getopenboards)   .then(this.trelloservice.getalllists)   .then(() => {     console.log('finished getting projects, boards, , lists');   })   .catch((err) => {     console.log(err);     console.log('service rejected'); }); 

you passing getopenboards function reference, makes lose it's binding object it's on. can 1 of 2 things:

1: call function directly in handler:

this.catchflyservice.getprojects()   .then(i => this.trelloservice.getopenboards())   .then(i => this.trelloservice.getalllists())   .then(() => {     console.log('finished getting projects, boards, , lists');   })   .catch((err) => {     console.log(err);     console.log('service rejected'); }); 

2: bind function when passing in:

this.catchflyservice.getprojects()   .then(this.trelloservice.getopenboards.bind(this.trelloservice))   .then(this.trelloservice.getalllists.bind(this.trelloservice))   .then(() => {     console.log('finished getting projects, boards, , lists');   })   .catch((err) => {     console.log(err);     console.log('service rejected'); }); 

edit

one final note. assume you're doing here calling 3 async methods have no dependencies (as there no parameters functions passed then). because of way you're chaining then functions called in sequence. if there no dependencies between 3 calls, can futher optimise code calling them in parallel:

var p1 = this.catchflyservice.getprojects(); var p2 = this.trelloservice.getopenboards(); var p3 = this.trelloservice.getalllists();  promise.all([p1,p2,p3])   .then(() => {     console.log('finished getting projects, boards, , lists');   })   .catch((err) => {     console.log(err);     console.log('service rejected'); });