Служба запросов Select2 пуста

Question

Я бы настроил поиск для моего выпадающего списка select2.После ввода 3-х символов в поле поиска я бы выполнил служебный вызов с этими параметрами поиска.

Когда я выбираю раскрывающийся список, он показывает мне ошибку TypeError (Невозможно прочитать свойство 'machineService' из null) Служба инициализированаперед вызовом метода getSelectOptions.

HTML:

<select2 id="inputMachine"
         [data]="machinesModel.data"
         [options]="machinesModel.options"
         [width]="'100%'"
         [disabled]="machinesModel.isDisabled()"
         (valueChanged)="machinesModel.onValueChanged($event); onSelectedMachinesChanged($event)">
</select2>

Компонент:

protected getSelectOptions(placeholder: string) {
return {
  allowClear: false,
  placeholder: this.translate.instant(placeholder),
  multiple: true,
  minimumInputLength: 3,
  theme: 'bootstrap',
  query: function (options) {
    this.machineService.findProjections(options.term).subscribe(
      machines => {
        this.setMachines(machines);
        options.callback(this.machinesModel.data);
      },
      error => {
        console.log('Could not load machines: ', error);
      }
    );
  }
};
}

Есть кто-тоесть идеи?

Answer 1

При использовании function () {} ключевое слово this будет указывать на контекст самой функции.Поскольку служба определена снаружи, она не будет известна в этой области.До работы со стрелками вы должны были это сделать;

var that = this;
{
 // ...
 query: function (options) {
    that.machineService.findProjections(options.term).subscribe();
 }
 // ...
}

Однако, используя функцию стрелки ES6 (=>), это больше не требуется.Они используют то, что называется лексическая область видимости .При использовании функций стрелок область действия не изменится, поэтому this все равно будет ссылаться на исходный контекст.

query: (options) => this.machineService.findProjections(options.term).subscribe()

Answer 2

Сфера проблемы.

Используйте жирную стрелку, чтобы избавиться от этого.

protected getSelectOptions(placeholder: string) {
  return {
    allowClear: false,
    placeholder: this.translate.instant(placeholder),
    multiple: true,
    minimumInputLength: 3,
    theme: 'bootstrap',
    query: (options) => {
      this.machineService.findProjections(options.term).subscribe(
        machines => {
          this.setMachines(machines);
          options.callback(this.machinesModel.data);
        },
        error => {
          console.log('Could not load machines: ', error);
        }
      );
    }
  };
}