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에서 동일한 리팩토링 도구를 사용했기 때문에 혼란 스럽지만 새로운 기능을 찾으려고 애 쓰지 않았습니다. 나는이 기능의 사용을 시도하고있어 어디

편집 여기 은 다음과 같습니다 업로드하기 위해 나는 DROPZONE로 이미지를 드래그 할 때 호출되는

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

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

그리고 자체에서이 기능을하고 속성을 표시하십시오.

편집하는 것은 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)