TypeError - Function undefined - Angular 2

Question

Это довольно простая проблема, но я не могу понять, в чем проблема - я думаю, что это связано с неправильным отображением функции при транспиляции.

Я рефакторинг функции, чтобы сделать его чище - вот исходная функция здесь:

handleFileSelect(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 

    var files = e.dataTransfer.files, output = []; 

    for (var i = 0, f; f = files[i]; i++) { 
     output.push('<li><strong>'+f.name+'</strong> (', f.type || 'n/a', ') - ', 
        f.size, ' bytes, last modified: ', 
        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', 
        '</li>'); 
    } 
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 

    if(this.reader == undefined) 
     this.reader = new FileReader(); 
    this.reader.onload = (e) => { 
     document.getElementById('image-chosen')['src'] = e.target['result']; 
    }; 
    this.reader.readAsDataURL(files[0]); 

    } 

, который работает отлично. Когда я делаю простой рефакторинг перемещения для цикла в свою собственную функцию она не работает и выдает эту ошибку (после вышеупомянутой функции, конечно):

buildImageDetails(files, output) { 
    for (var i = 0, f; f = files[i]; i++) { 
     output.push('<li><strong>'+f.name+'</strong> (', f.type || 'n/a', ') - ', 
        f.size, ' bytes, last modified: ', 
        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', 
        '</li>'); 
    } 
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 

    if(this.reader == undefined) 
     this.reader = new FileReader(); 
    this.reader.onload = (e) => { 
     document.getElementById('image-chosen')['src'] = e.target['result']; 
    }; 
    this.reader.readAsDataURL(files[0]); 
    } 

Ошибка:

EXCEPTION: TypeError: this.buildImageDetails is not a function 
VM124847:84 EXCEPTION: TypeError: this.buildImageDetails is not a function 

Я запутался в этом, потому что я сделал то же самое с рефакторингом в ngOInit, но он не жаловался на попытку найти новую функцию.

EDIT Вот где я пытаюсь использовать функции:

handleFileSelect(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 

    var files = e.dataTransfer.files, output = []; 
    this.buildImageDetails(files, output); 
} 

и эта функция сама по себе называется, когда я перетащить изображение в DropZone для того, чтобы загрузить его и отобразите его свойства.

EDIT 2

Я рассматривает это еще некоторые имеют пришли к выводу, что проблема связана с обязательным. Для моих событий, чтобы правильно работать, я связал их с UploadCompnent (название класса мы работаем в) как так:

attachDragListeners() { 
    this.cols = document.querySelectorAll('#columns .column'); 

    [].forEach.call(this.cols, (col) => { 
     col.addEventListener('dragstart', this.handleDragStart.bind(UploadComponent), false); 
     col.addEventListener('dragenter', this.handleDragEnter.bind(UploadComponent), false); 
     col.addEventListener('dragover', this.handleDragOver.bind(UploadComponent), false); 
     col.addEventListener('dragleave', this.handleDragLeave.bind(UploadComponent), false); 
     col.addEventListener('drop', this.handleDrop.bind(UploadComponent), false); 
     col.addEventListener('dragend', this.handleDragEnd.bind(UploadComponent), false); 
    }); 
    } 

Эта функция вызывается в ngOnInit() связать функции, соответствующие их событий. Поэтому по существу целевая функция, которую я пытаюсь вызвать, не существует в контексте объекта, на который я его вызываю.

Я отправлю обратно решение, когда найду его.

Answer 1

Я думаю, что вам нужно привязать к this не к UploadComponent

this.handleDragStart.bind(this)