Блог

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

не удается прочитать свойство 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`]);
        },
      }
    ];
  }
  

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

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

 // ...

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

// ...