Service injected in service is undefined

Question

I have two services, where first is injected in second service, in this way:

rule.service.ts

@Injectable()
export class RuleService {

    constructor(
        private _resourceService: ResourceService
    ){}

    someMethod(url: string) {
       this._resourceService.getData(url).then((res) => {
          console.log(res);
       }
    }

}

resource.service.ts

@Injectable()
export class ResourceService {

   constructor(
       http: Http
   ) { }

   public getData(url?: string): Promise<T> {
       //some code
   }
}

called service jQuery :(

private run(input: any, a_parameters: any) {
$("select[name='" + a_parameters[0] + "']").change(function(e: any) {
            return new Promise((resolve) => {
                let array: any[] = [];
                this._resourceService.getData(a_parameters[1]).then(() => {
                    let result: any;
...

but when I trying call someMethod from RuleService, I get this console error:

EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'getData' of undefined TypeError: Cannot read property 'getData' of undefined at eval (eval at (http://localhost:8099/app.js:457:2), :210:39) at new ZoneAwarePromise (eval at (http://localhost:8099/polyfills.js:2304:2), :695:29) at HTMLSelectElement.eval (eval at (http://localhost:8099/app.js:457:2), :208:20) at HTMLSelectElement.dispatch (http://cdn.execon.pl/resources/GRM/js/libs/jquery-1.11.0.min.js:3:8066) at HTMLSelectElement.r.handle (http://cdn.execon.pl/resources/GRM/js/libs/jquery-1.11.0.min.js:3:4767) at ZoneDelegate.invokeTask (eval at (http://localhost:8099/polyfills.js:2304:2), :363:31) at Object.onInvokeTask (eval at (http://localhost:8099/vendor.js:101:2), :3971:41) at ZoneDelegate.invokeTask (eval at (http://localhost:8099/polyfills.js:2304:2), :362:36) at Zone.runTask (eval at (http://localhost:8099/polyfills.js:2304:2), :166:47) at HTMLSelectElement.ZoneTask.invoke (eval at (http://localhost:8099/polyfills.js:2304:2), :416:38) ErrorHandler.handleError @ core.umd.js?e2a5:3064 next @ core.umd.js?e2a5:8041 schedulerFn @ core.umd.js?e2a5:3689 SafeSubscriber.__tryOrUnsub @ VM86162:223 SafeSubscriber.next @ VM86162:172 Subscriber._next @ VM86162:125 Subscriber.next @ VM86162:89 Subject.next @ VM86159:55 EventEmitter.emit @ core.umd.js?e2a5:3675 NgZone.triggerError @ core.umd.js?e2a5:4040 onHandleError @ core.umd.js?e2a5:4001 ZoneDelegate.handleError @ zone.js?fad3:334 Zone.runGuarded @ zone.js?fad3:142 _loop_1 @ zone.js?fad3:540 drainMicroTaskQueue @ zone.js?fad3:549 ZoneTask.invoke @ zone.js?fad3:420 ListPicker._handleMouseUp @ about:blank:540

Anyone can tell me, what I do wrong? How can I correct implement service in service?

Thanks a lot! Its work. I can belive that i made that mistake. ;) — Jaroslaw K.

yurzui yurzui · Accepted Answer · 2017-03-16T20:43:03

You need to use arrow function to retain this

$("select[name='" + a_parameters[0] + "']")
   .change((e: any) => { // <== arrow function instead of FE(function expression)
        return new Promise((resolve) => {
            let array: any[] = [];
            this._resourceService.getData(a_parameters[1]).then(() => {

Service injected in service is undefined

1 Answers