Не удается получить доступ к ссылке на метод машинописи из метода DataTable

Question

Я соединяю datatable из datatables.net с моим приложением Angular, где я пытаюсь получить данные из строки в машинописи. Я могу видеть данные через консоль, но не могу добраться до других моих методов в классе.

Поэтому я попытался .bind (this) в методе table.on (), но это не помогло.

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 (это), но я не уверен.

Заранее спасибо.

Answer 1

Проблема в том, что обработка событий в jQuery основана на изменении this в области действия функции.Когда вы присоединяете обработчик события click к .edit, jQuery будет пытаться вызвать обработчик, передающий элемент DOM, на который нажали, как this.Это необходимо для вашего кода, потому что вы используете элемент 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. Используйте функцию стрелки, чтобы сохранить внешнее это, и получить элемент, по которому щелкнули, из события:

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