Question

我在我的角度项目中使用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`]);
        },
      }
    ];
  }

Answer 1

这是因为您将单元格点击侦听器作为常规功能提供，因此该功能内部的上下文发生了变化，this未定义。

要保留组件类的上下文，您需要将监听器作为所谓的arrow function提供。

// ...

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

// ...

Angular router.navigate无法与单元格一起使用，请在tabulator.info js

1 个答案: