Как вызвать метод из filterFunction() в ng2-smart-table?

Я пытаюсь вызвать метод из filterfunction(), используя ключевое слово this. Однако я понимаю, что «это» относится к обработчику событий, а не к компоненту, и значение, которое я получаю для «это», равно нулю, поэтому я получаю ошибку времени выполнения.

export class SmartTableComponent {

  settings = {
    ...
    columns: {
      ...
      firstName: {
        title: 'First Name',
        type: 'string',
        filterFunction(cell?: any, search?: string): boolean {          
          return this.doFilter(cell, search);
        }
      },
      ...
    },
    ...
  };


  doFilter(cell?: any, search?: string): boolean{
    return true;
  }
}

В Java мы могли бы получить ссылку на «это», используя SmartTableComponent.this.doFilter(...), но, похоже, это не работает в TypeScript.

Как я могу вызвать метод компонента из filterFunction в ng2-smart-table?


angular ng2-smart-table
person pellyadolfo    schedule 29.05.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Кажется, что при использовании лямбда-выражения вместо анонимной функции значение this сохраняется из класса-оболочки. Итак, это решение:

export class SmartTableComponent {

  settings = {
    ...
    columns: {
      ...
      firstName: {
        title: 'First Name',
        type: 'string',
        filterFunction:(cell?: any, search?: string) => {
          return this.filterByText(cell.doc[0]['value'], search);
        },
      },
      ...
    },
    ...
  };


  doFilter(cell?: any, search?: string): boolean{
    return true;
  }
}

У меня есть идея здесь: Angular 4 , this не определено при использовании функции обратного вызова onComponentInitFunction таблицы ng2-smart

person pellyadolfo    schedule 01.06.2018

arrow_upward
1
arrow_downward

Проблема в том, что тот, кто вызывает эту функцию, устанавливает переменную this, поэтому ваше представление о том, что означает this в функции, изменилось. Чтобы исправить this в функции (и предотвратить ее изменение), вы можете использовать Привязать. Следующий код показывает (надеюсь) рабочий пример.

export class SmartTableComponent {

  settings = {
    ...
    columns: {
      ...
      firstName: {
        title: 'First Name',
        type: 'string',
        filterFunction(cell?: any, search?: string): boolean {          
          return this.doFilter(cell, search);
        }.bind(this)
      },
      ...
    },
    ...
  };


  doFilter(cell?: any, search?: string): boolean{
    return true;
  }
}

Мое предыдущее объяснение скорее интуитивно понятно, чем строго правильно. Если вы действительно хотите узнать, как это работает, ознакомьтесь с https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators./this

person TWT    schedule 30.05.2018
comment
.bind(this) не компилируется в Visual Studio - person pellyadolfo; 01.06.2018