制表单元格单击：如何在单元格单击时以角度调用函数并使用组件元素答案

【问题标题】：Tabulator cell click: How to call a function in angular on cell click and use component elements制表单元格单击：如何在单元格单击时以角度调用函数并使用组件元素
【发布时间】：2019-06-07 20:33:50
【问题描述】：

我正在尝试将 Tabulator 用于 Angular 7 中的表格。我正在尝试在单击单元格时调用一个函数，以便该函数应该打开一个 MatDialog 框并显示行信息。但是，问题是当我尝试访问被调用函数内的任何组件变量（对话框：MatDialog）时，它是未定义的。在调试时，我发现该函数是在制表符内部调用的，而不是在角度组件中调用的。有没有办法在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',
          });

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

【问题讨论】：

你试过 lamda 吗？ cellClick: () => this.openDialog()
@Gilsdav：成功了！请解释一下你是如何找到修复的？谢谢

标签： angular angular-material angular7 tabulator

【解决方案1】：

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

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

【讨论】：

请不要添加“谢谢”作为答案。在网站上投入一些时间，您将获得足够的 privileges 来为您喜欢的答案投票，这是 Stack Overflow 表达谢谢的方式。

【解决方案2】：

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

【讨论】：

太棒了！感谢您的解释。使用 lamda 函数，我还能够传递事件和单元格参数，例如 cellClick: (e, row)=> this.openDialog(e, row)。谢谢。

【解决方案3】：

使用 Tabulator 版本 5.0.10 我这样做了：

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

setSelection 在方法部分中。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。