如何在 angular 的下拉菜单中添加 onchange 事件？答案

【问题标题】：how to add onchange event on dropdown in angular ?如何在 angular 的下拉菜单中添加 onchange 事件？
【发布时间】：2018-04-08 06:47:33
【问题描述】：

您能告诉我如何在 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('');
}

【问题讨论】：

标签： javascript angular

【解决方案1】：

使用（更改）事件而不是（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);
}

【讨论】：

如何获得所选项目的价值..我可以使用 event.target.value 获得价值
是的 @user5711656 这甚至是一种更清洁的方式。这种情况下不需要创建模板引用。
使用 Angular 12，这仍然运行良好。
关于我发现的矿工错误是在选项而不是元素上添加（更改）事件列表，即
这给了我一个提示。我使用了formControlName，因为我已经在使用响应式表单了。启用strictTemplate后来到这里

【解决方案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);
}

【讨论】：