angular - TypeError - 函数未定义 - 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]);

  }

效果很好。当我做一个简单的重构，将 for 循环移动到它自己的函数中时，它不起作用并抛出这个错误(当然是在上述函数之后):

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 中做了同样的重构式的事情，但它没有提示试图找到新函数。

编辑这是我尝试使用该功能的地方:

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

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

当我将图像拖到拖放区以上传它并显示它的属性时，这个函数本身就会被调用。

编辑 2

我已经对此进行了更多检查，得出的结论是问题与绑定(bind)有关。为了让我的事件正常工作，我将它们绑定(bind)到 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() 中调用，以将函数绑定(bind)到它们相应的事件。所以本质上，我尝试调用的目标函数不存在于我调用它的对象的上下文中。

我会在找到解决方案后发回。

Answer 1

我认为您需要绑定(bind)到 this 而不是 UploadComponent

this.handleDragStart.bind(this)