制表符单元格单击：如何在单元格单击时调用 angular 中的函数并使用组件元素

Question

我正在尝试对 angular 中的表使用 Tabulator。我正在尝试在单元格单击时调用一个函数，这样该函数应该打开一个 MatDialog 框并显示行信息。但是，问题是当我尝试访问被调用函数内的任何组件变量（对话框：MatDialog）时，它是未定义的。在调试时我发现该函数是在 Tabulator 内部调用的，而不是在 angular 组件中调用的。有没有办法在 Angular 中调用函数并在函数中访问组件变量？


export class ExampleTableComponent implements OnInit {
exampleTable: Tabulator;

 constructor(private dialog: MatDialog) { }

ngOnInit() {

    this.exampleTable = new Tabulator("#ex-table-div",{
      height : 300,
      data: this.example_data,
      layout: "fitColumns",
      columns: [
        { formatter:"rownum", align:"center", width:40},
        { formatter: this.printIcon, width:40, align:"center", 
         cellClick: this.openDialog
        },
        .......
      ],
      ......
    });
}


openDialog(e, cell){

    const dialogConfig = new MatDialogConfig();

          dialogConfig.disableClose = true;
          dialogConfig.autoFocus = true;

          this.dialog.open(DetailsComponent, {      
            width: '300px',
          });

     ..........
  }
......
}

Answer 1

ES6引入lambda也叫arrow function。主要区别是 this.

的范围

函数：this 的范围 = 调用者（制表符）
lambda：this 的范围 = lambda 所在的类 (ExampleTableComponent)

可以使用 cellClick: this.openDialog.bind(this) 在没有 ES6 语法的情况下完成，但我个人更喜欢 lambda。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

我也有这个问题。以下是我的解决方法：

cellClick: (e, row)=> this.openDialog(e, row)

Answer 3

使用 Tabulator 版本 5.0.10 我是这样做的：

this.tabulator.on("cellClick", (e, row)=> this.setSelection(e, row))

其中 setSelection 在方法部分内。

制表符单元格单击：如何在单元格单击时调用 angular 中的函数并使用组件元素

Tabulator cell click: How to call a function in angular on cell click and use component elements

angular

angular-material

angular7

tabulator