Как вызвать метод typescript из javascript

#javascript #angular #typescript

Вопрос:

Я написал код для чтения данных из таблицы (в таблице у меня есть кнопка редактирования для редактирования значений записей). Итак, для этого у меня есть код typescript в методе ngOnInit, как показано ниже. Конфигурация считывается таблицей в employee.html .

 export class EmployeeComponent implements OnInit {

config = null;

ngOnInit(): void {
  this.config = {
   events: {
        click(event, context) {
                alert('name: '   context.getData('nameCol'));
        this.doSomething(context.getData('nameCol'))
              }
           }
}

doSomething(name) { // function declaration
        console.log('Param1: '   data);
}
}

При нажатии кнопки редактирования вызывается метод click (событие, контекст), а также выводится предупреждение в браузере с данными, которые я пытаюсь отредактировать. Но я не могу получить доступ к этому методу.doSomething() из метода click (метод doSomething не вызывается). Любая подсказка, как получить доступ к this.doSomething() из метода click.

1. Возможно, проблема с областью действия this попробуйте создать переменную в начале ngOnInit like const that=this; и использовать ее внутри вашей части click как that.doSomething()

2. TypeScript компилируется в JavaScript к тому времени, когда браузер его видит. Таким образом, нет такой вещи, как вызов метода TypeScript из JavaScript. Ваша проблема в том, что this inside of click ссылается на EmployeeComponent.config.events , а не EmployeeComponent . @BeshambherChaukhwan имеет на это право с точки зрения кэширования ссылки на EmployeeComponent экземпляр как that (или me или self или что угодно) и использования этой переменной вместо this .

3. Спасибо @Beshamberchaukhwan. Это сработало.

4. @PramodS Тогда я дам ответ

Ответ №1:

Проблема с областью действия this , которая относится к config.events. Вам необходимо сохранить ссылку заранее, создав переменную в начале ngOnInit . Попробуйте следующее:

  ngOnInit(): void {
  const that = this;
  this.config = {
   events: {
        click(event, context) {
            alert('name: '   context.getData('nameCol'));
            that.doSomething(context.getData('nameCol'));
        }
   }   
 }

Ответ №2:

используйте функцию стрелки вместо выражения функции, которое имеет собственное this .

click(prop) { this refers to click } если вы используете функцию стрелки, например

click: (prop) => { this refers to class instance }

 export class EmployeeComponent implements OnInit {

config = null;

ngOnInit(): void {
  this.config = {
   events: {
        click: (event, context) => {
                alert('name: '   context.getData('nameCol'));
                this.doSomething(context.getData('nameCol'))
              }
           }
}

doSomething(name) { // function declaration
        console.log('Param1: '   data);
}
}