TypeError - 関数は未定義です - 角度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); 
} 

そして、私はそれをアップロードするために、ドロップゾーンにイメージをドラッグすると、それ自体でこの関数が呼び出されると、そのプロパティを表示します。

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

私はあなたが私はこれが多くのコンテキストを必要と推測していないUploadComponent

this.handleDragStart.bind(this)