Angular 4: TypeError: this.function не является функцией

Question

У меня заканчиваются идеи ... Я видел, что этот вопрос задавали много раз здесь и здесь и многие другие, но я не мог найти способ решить мою проблему.Итак, как я понял, проблема в this, это не относится к правильному контексту.Как использовать функцию стрелки для захвата this с сайта декларации?

drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {
    // more code than displayed here
    ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
}

onFileSelected(event) {
    for (const file of event.target.files) {
        if (file) {
            const reader = new FileReader();

            reader.onload = function(e: FileReaderEvent) {
                const canvas = <HTMLCanvasElement>document.getElementById('canvas');
                const ctx = canvas.getContext('2d');
                const img = new Image;

                img.onload = draw;

                function draw() {
                    this.drawImageProp(ctx, this, 0, 0, canvas.width, canvas.height, 0.5, 0.5);
                }

                img.src = e.target.result;
            };

            reader.readAsDataURL(file);
        }
    }
}

Answer 1

Используйте замыкание:

onFileSelected(event) {
    const self = this;
    for (const file of event.target.files) {
        if (file) {
            const reader = new FileReader();

            reader.onload = function(e: FileReaderEvent) {
                const canvas = <HTMLCanvasElement>document.getElementById('canvas');
                const ctx = canvas.getContext('2d');
                const img = new Image;

                img.onload = draw;

                function draw() {
                    self.drawImageProp(ctx, img, 0, 0, canvas.width, canvas.height, 0.5, 0.5);
                }

                img.src = e.target.result;
            };

            reader.readAsDataURL(file);
        }
    }
}