Нажатие на ячейку табулятора: как вызвать функцию углового щелчка на ячейке и использовать элементы компонента - PullRequest
Новая
       32

Нажатие на ячейку табулятора: как вызвать функцию углового щелчка на ячейке и использовать элементы компонента

0 голосов
/ 07 июня 2019

Я пытаюсь использовать Tabulator для таблиц в angular 7. Я пытаюсь вызвать функцию по щелчку ячейки, чтобы функция открывала окно MatDialog и отображала информацию о строках. Однако проблема в том, что когда я пытаюсь получить доступ к любой из переменных Component (dialog: MatDialog) внутри вызываемой функции, она не определена. При отладке я обнаружил, что функция вызывается внутри Tabulator, а не в угловом компоненте. Есть ли способ вызвать функцию в 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',
          });

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

1 Ответ

0 голосов
/ 08 июня 2019

ES6 представляет lambda, также называемый arrow function.Основное отличие - область действия функции this.

  • : область действия this = вызывающая сторона (табулятор)
  • лямбда: область действия this = класс, где лямбдаis (ExampleTableComponent)

Это можно сделать без синтаксиса ES6, используя cellClick: this.openDialog.bind(this), но я лично предпочитаю лямбду.

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

...