獲取已定義方法的未定義錯誤

Question

我一直在嘗試使用 InteractJS 為我的 angular 應用程序中的按鈕實現拖放功能

我想從可交互 div 的 drop 事件調用類中定義的方法，但出現以下錯誤。

我目前的代碼：

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 不受控制，所以這實際上是未定義的。

Answer 1

您需要this關鍵字的含義綁定到onDrop()事件處理程序。 沒有它， this.methods()語句實際上是指事件處理程序中的methods()函數。 嘗試以下

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

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