Angular router.navigate 无法在 tabulator.info js 中使用单元格点击

Question

我正在使用他们的文档中提到的 tabulator.info js in my angular project to load table. This has Angular Framework Support。我有一个操作列，用于在该列格式化程序中放置编辑按钮。问题是 routerLink 也不起作用，单元格点击功能中的 this.router.navigate 也不起作用。 this.router.navigate 抛出以下错误

cannot read property navigate of undefined

但是 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`]);
        },
      }
    ];
  }

Answer 1

这是因为您将单元格点击侦听器作为普通函数提供，因此函数内的上下文发生变化，this 未定义。

要保持组件的上下文 class，您需要将侦听器提供为所谓的 arrow function。

// ...

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

// ...

Angular router.navigate 无法在 tabulator.info js 中使用单元格点击

Angular router.navigate not working with cell click in tabulator.info js

angular

typescript

tabulator