如何在 angular 的下拉菜單中添加 onchange 事件？

Question

你能告訴我如何在 angular 的下拉列表中添加 onchange 事件嗎？ 我做了一個簡單的演示，最初我獲取bank names並在drop down顯示。 現在我想在那個下拉菜單上添加on change event 。換句話說，我想選擇哪個bank用戶。 使用該bank名稱我想獲得state names

這是我的代碼https://stackblitz.com/edit/angular-batt5c

<select class='select-option' 
        (ngModelChange)='onOptionsSelected($event)'>
    <option class='option' 
    *ngFor='let option of dropDownData' 
    [value]="option.seo_val">{{option.text_val}}</option>
</select>

onOptionsSelected(){
  console.log('===');
  // send selected value
  this.seletedValue.emit('');
}

Answer 1

使用 (change) 事件代替 (ngModelChange)。

<select class='select-option'
    #mySelect
    (change)='onOptionsSelected(mySelect.value)'>
   <option class='option' 
   *ngFor='let option of dropDownData' 
   [value]="option.seo_val">{{option.text_val}}</option>
</select>

在打字稿文件中：

onOptionsSelected(value:string){
     console.log("the selected value is " + value);
}

Answer 2

試試這個。

<select class='select-option' [(ngModel)]="selected"
     (change)='onOptionsSelected($event)'>
   <option class='option'  *ngFor='let option of dropDownData' 
   [value]="option.seo_val">{{option.text_val}}</option>
</select>

public onOptionsSelected(event) {
   const value = event.target.value;
   this.selected = value;
   console.log(value);
}