Как мы можем вызвать две разные функции для раскрывающегося списка в HTML / Angular?

Question

Я закодировал выпадающий список с двумя вариантами: английский и французский.Но для каждого варианта мне нужно вызывать разные функции.Мой код в HTML:

 <select (click)="myFuncEnglish()">
    <option value="EN">English</option>
    <option value="FR">France</option>
</select>

И для Angular это:

myFuncEnglish() {
    console.log('function called is english');
  }`

Можете ли вы помочь мне, пожалуйста, узнать, как я могу кодировать разные функции для разных опций и отображатькогда я нажимаю на французском «функция называется французским», а когда я нажимаю на английском, «функция называется английским».

Answer 1

Полагаю, вам не нужно вызывать две функции.Вам нужно передать выбранное значение в качестве аргумента функции и проверить значение в теле функции, чтобы консоль записывала ваше сообщение.

HTML

<select (ngModelChange)="myFuncEnglish($event)"  [(ngModel)]="lang">
    <option value="EN">English</option>
    <option value="FR">France</option>
</select>

Компонент

myFuncEnglish(lang) {
    if(lang === 'FR'){
      console.log('function called is french');
    } else {
      console.log('function called is english');
    }
}

См. Рабочий пример здесь

Answer 2

Другой способ - не использовать ngModel, просто используйте событие change .

HTML

<select (change)="myFuncEnglish($event)">
    <option value="EN">English</option>
    <option value="FR">France</option>
</select>

Машинопись

myFuncEnglish(event: any) {
    if(event.value === 'FR'){
      console.log('function called is french');
    } else {
      console.log('function called is english');
    }
}

Answer 3

Сделайте это onchange insted, на Angular я думаю, что это ng-change="funcEnglish()"

Затем на funcEnglish подтвердите item.value, чтобы узнать, что делать.

function funcEnglish(item) {
    console.log('function called is '+ item.value);
  }

 <select onchange="funcEnglish(this)">
    <option value="Empty">None</option>
    <option value="EN">English</option>
    <option value="FR">France</option>
</select>