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);
}

当我将图像拖入dropzone以便上传并显示它的属性时，就会调用此函数。

编辑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)

TypeError - 函数undefined - Angular 2

1 个答案: