为定义的方法获取未定义的错误

Question

我一直在尝试使用 InteractJS

在我的 angular 应用程序中实现按钮的拖放功能

我想从可交互 div 的放置事件中调用 class 中定义的方法，但出现以下错误。

我当前的代码：

HTML

<div class="example-box drag-drop plugins">
        Image
</div>


<div class="dropzone">
  <h3 style="color:white;">Dropzone</h3>
</div>

TS

interact('.dropzone').dropzone({
      overlap: 0.75,
      accept: '.plugins',

      ondrop: this.onDrop,
    })

    interact('.drag-drop')
      .draggable({
        inertia: false,
        autoScroll: true
      })
  }


  methods() {
    console.log("Inside methods()");
  }

  onDrop(event) {
    event.preventDefault();
    this.methods();
  }

我已经精简了代码以提高可读性。我猜也许当事件被触发时 angular 不受控制，所以 this 实际上是未定义的。

Answer 1

您需要 bind this 关键字的含义到 onDrop() 事件处理程序。没有它，语句 this.methods() 实际上指的是事件处理程序中的 methods() 函数。尝试以下

interact('.dropzone').dropzone({
  overlap: 0.75,
  accept: '.plugins',

  ondrop: this.onDrop.bind(this),          // <-- use `bind()` here
})

为定义的方法获取未定义的错误

Getting undefined error for method defined

javascript

drag-and-drop

typescript

angular

interactjs