Я пытаюсь использовать табулятор для таблиц в 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',
});
..........
}
......
}
@Gilsdav: Это сработало! Объясните, пожалуйста, как вы нашли исправление? Спасибо





ES6 представляет lambda, также называемый arrow function. Основное отличие - это объем this.
this = вызывающая сторона (табулятор)this = classe, где находится лямбда (ExampleTableComponent)Это можно сделать без синтаксиса ES6, используя cellClick: this.openDialog.bind(this), но я лично предпочитаю лямбда.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Здорово! Спасибо за объяснение. С помощью лямбда-функции я также смог передать параметры события и ячейки, такие как cellClick: (e, row) => this.openDialog (e, row). Спасибо.
У меня тоже была такая проблема. Вот как я это решил:
cellClick: (e, row)=> this.openDialog(e, row)
Пожалуйста, не добавляйте «спасибо» в качестве ответов. Потратьте некоторое время на сайт, и вы получите достаточно привилегии, чтобы голосовать за ответы, которые вам нравятся, что является способом выражения благодарности Stack Overflow.
С Tabulator версии 5.0.10 я сделал так:
this.tabulator.on("cellClick", (e, строка) => this.setSelection (e, строка))
где setSelection находится внутри части методов.
Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, редактировать добавьте дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.
Вы пробовали лямду?
cellClick: () => this.openDialog()