無法從DataTable方法訪問對打字稿方法的引用

Question

我正在使用我的Angular應用程序從datatables.net連接一個數據表，在該應用程序中我試圖從打字稿中獲取一行數據。 我可以通過控制台查看數據，但是無法訪問該類中的其他方法。

所以我試圖對table.on（）方法進行.bind（this），但沒有幫助。

var table = $('#datatable').DataTable();

// Edit record
  table.on('click', '.edit', function() {
    let $tr = $(this).closest('tr');
    var data = table.row($tr).data();
    console.log(data[0]);
    this.navigateTo(data[0]);
  }.bind(this));

但是我收到以下錯誤：

ERROR TypeError: Cannot read property '0' of undefined

因此，我需要來自data [0]的數據中的符號來傳遞給另一個組件。 但是隨后出現此錯誤。

我究竟做錯了什么？ 我想這與.bind（this）有關，但我不確定。

提前致謝。

Answer 1

問題在於jQuery中的事件處理依賴於在函數范圍內更改this 。 當您將click事件處理程序.edit ，jQuery將嘗試調用句柄傳遞點擊DOM元素作為this 。 這對您的代碼來說是必要的，因為您正在$(this).closest('tr');中使用clicked元素$(this).closest('tr'); 。

當添加.bind(this)可以防止jQuery在調用處理程序時“替換” this 。 在這種情況下， this與調用.bind(this)時相同。

有幾種方法可以解決這種情況：

1. 創建對外部this的引用：

    var table = $('#datatable').DataTable(); var that = this; // Edit record table.on('click', '.edit', function() { let $tr = $(this).closest('tr'); var data = table.row($tr).data(); console.log(data[0]); that.navigateTo(data[0]); }); 

2. 保持綁定，但使用事件目標代替this目標：

    var table = $('#datatable').DataTable(); // Edit record table.on('click', '.edit', function(event) { let $tr = $(event.target).closest('tr'); var data = table.row($tr).data(); console.log(data[0]); this.navigateTo(data[0]); }.bind(this)); 

3. 使用箭頭功能保留外部元素，並從事件中獲取clicked元素：

    var table = $('#datatable').DataTable(); // Edit record table.on('click', '.edit', event => { let $tr = $(event.target).closest('tr'); var data = table.row($tr).data(); console.log(data[0]); this.navigateTo(data[0]); });