Angular 2 / typescript pass service into promise

Question

How can I pass in a service to a promise? I am trying to create a promise that will resolve when all the http request come back. Right now this.jiraService is undefined. Is there anyway to pass it to the constructor of the promise?

export class JiraComponent {
private stories:Map<string,number> = new Map<string,number>();

constructor(private jiraService:JiraService) {
}

ngOnInit() {
    this.jiraService.search()
        .then(x => this.getKeys(x['issues']))
        .then(keys => this.getLogs(keys))
        .then(x => console.log(this.stories));
}

getKeys(issues:Array<Object>) {
    let keys = new Array<string>();
    for (var i of issues) {
        keys.push(i['key']);
    }
    return keys;
}

getLogs(keys:Array<string>) {
    return new Promise(function (resolve, reject) {
        let count = 0;
        for (var k of keys) {
            this.jiraService.worklog(keys[0]).then(x => {
                count++;
                console.log(x);
                if (!this.stories.get(k)) {
                    this.stories.set(k, x['timeSpentSeconds']);
                }
                else {
                    this.stories.set(k, this.stories.get(k) + x['timeSpentSeconds']);
                }
                if (count == keys.length) {
                    resolve();
                }
            });
        }
    });
}

Answer 1

If you're having trouble accessing the this object within the executor function of your Promise, this explanation may help you out (mentioned above by danh).

However, this isn't the canonical structure for an Angular 2 app, and that may be the source of some of your troubles. A good place to start is the official Angular 2 Style Guide's discussion of Components and Services (it's all worth a read, though!).

Services make promises

Typically, a Component should not be making any Promises at all. The service presents your Component(s) with an endpoint to access business logic and/or data services (databases, external APIs, etc.).

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
    private allIsGood: boolean;

    public doSomething(): Promise<any> {
        console.log("I promise to return at some point.");
        return new Promise(function (resolve, reject) {
            this.allIsGood = someLongRunningActivity();
            if (this.allIsGood) {
                console.log("Resolving the promise.");
                resolve();
            } else {
                console.log("Something bad happened, don't forget to check for errors!");
                reject();
            }
        });
    }

    private someLongRunningActivity(): boolean {
        //run a query or perform some calculation
        return true;
    }
}

Components receive promises

Components should call a service and consume it's returned Promise.

import { Component } from '@angular/core';
import { MyService } from '../services';

@Component({
    selector: 'my-selector',
    templateUrl: 'my template.html'
})
export class MyComponent {

    constructor(private myService: MyService) {
        this.myService.doSomething()
            .then(() => {
                console.log("The promise was honored, you can do what you were waiting to do.");
            })
            .catch(() => {
                console.log("You remembered to check for errors!");
            });
    });
}

A few caveats:

• This assumes you've set up your Providers correctly during the initial bootstrap process!
• Paths to your imports may vary...

I'm only allowed to post two links, so I can't provide any more good references. Read up on Promises and Observables at the Angular 2 documentation site from above. Hope this helps!

Answer 2

What about using Promise.All([p1, p2, p3]) - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

This doesn't answer your question directly, but I think it will achieve what you want from your getter