Angular router.navigate не работает с щелчком ячейки в tabulator.info js - PullRequest
Новая
       324

Angular router.navigate не работает с щелчком ячейки в tabulator.info js

0 голосов
/ 05 марта 2019

Я использую tabulator.info js в моем угловом проекте для загрузки таблицы. Это Angular Framework Support , как указано в их документах. У меня есть столбец действия, чтобы поместить кнопку редактирования в этот форматер столбца Проблема в том, что routerLink также не работает, а функция this.router.navigate в ячейке также не работает. this.router.navigate выдает следующую ошибку

не может прочитать свойство навигация неопределенного

но срабатывает функция alert() внутри ячейки.

Я новичок в Angular. Пожалуйста помогите. Я использую этот табулятор как компонент и использую его, как указано в их документах.

Импорт 

import { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';

Конструктор 

constructor(private router: Router) {}

OnInit 

ngOnInit() {
    this.columnNames = [
      {
        title: "Question",
        field: "description"
      },
      {
        title: "Total Answers",
        field: "",
        formatter: function (cell) {
          return cell.getRow().getData().answers.length;
        }
      },
      {
        title: "Feedback Type",
        field: "feedbackType"
      },
      {
        title: "Action",
        field: "",
        formatter: function (cell) {
          //cell - the cell component
          //formatterParams - parameters set for the column
          //onRendered - function to call when the formatter has been rendered

          return `<a [routerLink]="/feedbackquestion/${cell.getRow().getData().id}/edit" class="btn btn-sm btn-inverse text-white"><i class="fa fa-edit"></i> Edit</a>`; //return the contents of the cell;
        },
        cellClick: function (e, cell) {
          //e - the click event object
          //cell - cell component
          this.router.navigate([`/feedbackquestion/${cell.getRow().getData().id}/edit`]);
        },
      }
    ];
  }

1 Ответ

1 голос
/ 05 марта 2019

Это потому, что вы предоставляете прослушиватель щелчков в ячейке как обычную функцию, поэтому контекст внутри функции изменяется и this не определен.

Чтобы сохранить контекст класса вашего компонента, вы должны предоставить слушателю так называемую функцию стрелки . 

// ...

cellClick: (e, cell) => {
  this.router.navigate([`/feedbackquestion/${cell.getRow().getData().id}/edit`]);
},

// ...
...