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

Я пытаюсь использовать табулятор для таблиц в 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',
          });

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

Вы пробовали лямду? cellClick: () => this.openDialog()

Gilsdav 07.06.2019 22:38

@Gilsdav: Это сработало! Объясните, пожалуйста, как вы нашли исправление? Спасибо

blinkadj 07.06.2019 23:08
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
2
1 586
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

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). Спасибо.

blinkadj 08.06.2019 01:30

У меня тоже была такая проблема. Вот как я это решил:

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

Пожалуйста, не добавляйте «спасибо» в качестве ответов. Потратьте некоторое время на сайт, и вы получите достаточно привилегии, чтобы голосовать за ответы, которые вам нравятся, что является способом выражения благодарности Stack Overflow.

Anton Menshov 13.05.2020 00:53

С Tabulator версии 5.0.10 я сделал так:

this.tabulator.on("cellClick", (e, строка) => this.setSelection (e, строка))

где setSelection находится внутри части методов.

Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, редактировать добавьте дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.

Community 07.01.2022 16:09

Другие вопросы по теме