'this' bound to subscribe function and not outer component scope in Angular2

Question

I am having an issue in one of my components in Angular2 where as 'this' is bound to wrong context within one of my components. I have other components where this issue is not occurring but I cannot see what the difference is. Here is my code:

Component:

import { Component, Input } from '@angular/core';
import { FilesService } from "./services/files.service";

@Component({
    selector: 'my-app',
    moduleId: module.id,
    templateUrl:'/app/views/app.html'
})

export class AppComponent {
    openFileUploader: boolean = false;
    fileUploaderScope:any;

    constructor (
        private _filesService: FilesService
    ) {
        let self = this;
        _filesService.emitter.subscribe(
            (response) => {
                this.fileUploaderScope = response.filters;
                this.openFileUploader = response.open;
            },
            () => {

            },
            () => {

            }
        )
    }
}

Inside my constructor function you can see I am dependency injecting the filesService then subscribing to an Event Emitter that is returned from this service within the constructor itself with the 'subscribe' function. As you can see from the following lines I am then watching for events and in the callback function I am mapping a response to some local component variables:

_filesService.emitter.subscribe(
            (response) => {
                this.fileUploaderScope = response.filters;
                this.openFileUploader = response.open;
            },

The only problem here is that 'this' is not bound to the correct context. When I add a breakpoint inside that subscribe function it is saying 'this' is not defined. I am using Typescript (ECMA6 functionality) so the arrow function has lexical this binding and is defined in the context of the constructor so 'this' should be bound to the component? As I said I have other components which have the same functionality which have no problems with the 'this' context so I am confused as to why this is happening. Can anyone spot where I have gone wrong?

Thanks

Answer 1

I haven't seen the pattern that causes the issue in your code, but commonly it's caused by

function () { ... }

instead of

() => { ... }

or when functions are passed around like

     _filesService.emitter.subscribe(
        (response) => {
            this.fileUploaderScope = response.filters;
            this.openFileUploader = response.open;
        },
        errorHandler,
        onCompleteHandler
     }

instead of

     _filesService.emitter.subscribe(
        (response) => {
            this.fileUploaderScope = response.filters;
            this.openFileUploader = response.open;
        },
        errorHandler.bind(this),
        onCompleteHandler.bind(this)
     }

or

     _filesService.emitter.subscribe(
        (response) => {
            this.fileUploaderScope = response.filters;
            this.openFileUploader = response.open;
        },
        (error) => errorHandler(error),
        () => onCompleteHandler()
     }