Как исправить проблему отсутствия обработчика событий?

Question

Мой код здесь .

У меня есть поле выбора. Я добавил обработчик события onchange для обработки события on change.

К сожалению, браузер подсказывает мне:

updateSelectedSystem is not defined

Однако я определил функцию updateSelectedSystem в app.component. ts.

Как я могу решить проблему?

В качестве альтернативы, возможно ли создать сгруппированный список выбора, используя angular компонент материала (то есть список выбора матов)?

Answer 1

У вас есть <select>, и вы хотите прослушать изменения в выбранном значении. Вы пытаетесь сделать это, вызывая функцию в своем компоненте в обработчике onChange.

<select onChange="updateSelectedSystem(availableSystem(availableSystem))">
  <!-- options -->
</select>  

Это не то, как вы обрабатываете изменения элемента управления формы в Angular. Вы можете использовать [(ngModel)] для привязки к свойству и использовать (onModelChange) для прослушивания изменений значений. Это простой подход для простого сценария ios.

Я бы порекомендовал использовать формы, так как формы более гибкие, когда вы хотите добавить сложность, и по-прежнему просты в настройке.

Для этого создайте свою форму в своем компоненте:

constructor(private formBuilder: FormBuilder) {}

form: FormGroup;   
selected: number[];

ngOnInit() {
  this.form = this.formBuilder.group({
    systems: this.formBuilder.control([])
  });
}

onChange() {
  this.selected = this.form.value.systems;
}

И привяжите к своему HTML, используя директивы форм:

<form [formGroup]="form" (change)="onChange()">
  <select multiple formControlName="systems">
    <!-- options -->
  </select>  
</form>

По мере того, как ваша форма усложняется, форма Директивы отражают структуру группы форм, которую вы строите в своем компоненте.

Простая версия

Вы всегда можете просто привязать событие change в выделении напрямую:

<select (change)="onChange()">
  <!-- options -->
</select>

ДЕМО: https://stackblitz.com/edit/angular-k3k2nn

Answer 2

Для select элементов в Angular необходимо использовать change и заключить его в скобки в app.component. html. Вам также необходимо добавить ngModel и связать с ним переменную:

<select 
  #availableSystem
  multiple
  matNativeControl
  style="height:300px;width:150px"
  [(ngModel)]="selectedSystem"
  (change)="updateSelectedSystem()">
  <optgroup *ngFor="let division of sharedDivisionList" [label]="division">
    <option *ngFor="let system of divisionToSystem[division]" [value]="systemToCalltree[system].callTreeId">
      {{system}}
    </option>  
  </optgroup>
</select>

И в вашем app.component.ts объявите переменную и используйте ее в updateSelectedSystem():

selectedSystem = '';
...

updateSelectedSystem() {
  console.log(this.selectedSystem);
}

Подробнее в этом ответе .