无法从 DataTable 方法访问对 typescript 方法的引用

Question

我正在将来自 datatables.net 的数据表与我的 Angular 应用程序连接起来，我试图在打字稿中获取数据。我可以通过控制台查看数据，但无法访问课堂中的其他方法。

所以我尝试在 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。当您将单击事件处理程序附加到.edit 时，jQuery 将尝试调用将单击的 DOM 元素作为this 传递的处理程序。这对于您的代码是必要的，因为您正在使用$(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. 使用箭头函数保持外层this，并从事件中获取被点击的元素：

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