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');中的clicked元素。

添加.bind(this)时，可以防止jQuery在调用处理程序时“替换” this。在这种情况下，this将与调用.bind(this)时的相同。

有几种方法可以解决这种情况：

创建对外部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]);
  });

保留绑定，但是使用事件目标而不是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));

使用箭头功能保留外部元素，并从事件中获取被单击的元素：

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

无法从DataTable方法访问对打字稿方法的引用

1 个答案: