如何获取选择选项的选定值？

Question

我想在 Angular 7 中获取选择选项的选定值。使用 ngModel 进行双向数据绑定，我还在 app.module.ts 中导入了 FormsModule。

我的 HTML 文件：

<select (change)="selectChangeHandler($event)" 
[(ngModel)]="optSelected"> 
 <option *ngFor="let opt of options" [value]="opt.id"> 
{{opt.title}} 
</option> 
</select>

我的 TS 文件：

optSelected = 'aaa';
selectChangeHandler(event: any) {
  this.optSelected = event.target.value;
  console.log('The selected option is: ' + this.optSelected);
}

Answer 1

由于您使用ngModel/双向数据绑定，而不是使用change 事件，您可以简单地使用ngModelChange 事件绑定。根据documentation，是

在视图之后产生 ngModelChange 事件的事件发射器 模型更新。

<select (ngModelChange)="selectChangeHandler($event)" [(ngModel)]="optSelected"> 
  <option *ngFor="let opt of options" [value]="opt.id"> 
    {{opt.title}} 
  </option> 
</select>

在你的 component.ts 上，

selectChangeHandler() {
  console.log(this.optSelected);
}