Question

我试图对角度7中的表使用制表符。我试图在单元格单击上调用函数，以便该函数应打开MatDialog框并显示行信息。但是，问题在于，当我尝试访问被调用函数内的任何Component变量（对话框：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',
          });

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

Answer 1

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

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

Answer 2

ES6引入了arrow function，也称为this。主要依据是this的范围。

功能：this =调用方（制表符）的作用域
lambda：cellClick: this.openDialog.bind(this)的范围= lambda所在的类（ExampleTableComponent）

无需使用{{1}}即可使用ES6语法完成此操作，但我个人更喜欢lambda。

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

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

2 个答案: