Почему мой html-файл не может найти метод UpdateSites (Uncaught ReferenceError: UpdateSites не определен)?

Question

Я настроил простое выпадающее меню следующим образом:

table.component.html

      <select class="form-control" onchange="UpdateSites(this.value)">
  <!-- //  console.log('FormControlChangeTest' + this.value)"> -->
      <option>France - Paris (Majunga)</option>
      <option>France - Paris (Opus)</option>  
</select>

table.component.ts

export class TableComponent {
 private UpdateSites(siteName){
    console.log('SITE NAME IS'+ siteName)
  }  

В консоли Chrome у меня появляется эта ошибка:

таблица: 35 Uncaught ReferenceError: UpdateSites не определен в HTMLSelectElement.onchange (таблица: 35)

Я хотел бы знать, что именно я делаю неправильно. Т.е. почему html-файл не находит метод UpdateSites.
PS: из любопытства я разместил UpdateSites вне компонента класса, но в том же файле. Однако это все еще не сработало.

Answer 1

Вот рабочий пример: https://stackblitz.com/edit/angular-y7zyqc

Код:

<select class="form-control" (change)="UpdateSites($event.target.value)">
  <!-- //  console.log('FormControlChangeTest' + this.value)"> -->
      <option>France - Paris (Majunga)</option>
      <option>France - Paris (Opus)</option>  
</select>

Я только что изменил HTML на приведенный выше фрагмент, и теперь он работает. Вы можете проверить в приведенном выше примере.