使用 Angular 6+ 捕获选择选项值答案

【问题标题】：Capture select option value with Angular 6+使用 Angular 6+ 捕获选择选项值
【发布时间】：2019-10-12 14:27:18
【问题描述】：

这对我来说可能很可悲，但我似乎无法使用 Material css 控制台记录带有 Angular 5+ 的 Select 的选定值。长话短说，它应该做的只是返回所选选项的值并将其打印在 console.log 中

html

<mat-select (change)='filter(element)'>
      <mat-option value='2018'>2018</mat-option>
      <mat-option value='2017'>2017</mat-option>
      <mat-option value='2016'>2016</mat-option>
      <mat-option value='2015'>2015</mat-option>
    </mat-select>

打字稿

filter(e:Element)
  {
    console.log(e)
  }

任何帮助将不胜感激。

【问题讨论】：

尝试selectionChange 而不是change 事件。 <mat-select (selectionChange)='filter($event)'>。你也可以通过$event 而不是element。来自文档https://material.angular.io/components/select/api
material.angular.io/components/select/api
那行得通。虽然我不得不摆脱 Element 标签，但它成功了

标签： html css angular typescript

【解决方案1】：

最好的方法是使用 ngModel 之类的

<select [(ngModel)]="selectedValue" (selectionChange)="printVal()">
<mat-option value=''>Select Value</mat-option>
  <mat-option value='2018'>2018</mat-option>
  <mat-option value='2017'>2017</mat-option>
  <mat-option value='2016'>2016</mat-option>
  <mat-option value='2015'>2015</mat-option>
</select>

在你的 ts 中

selectedValue = '';
printVal(){
   console.log(this.selectedValue)
   }

这里 ngModel 是一个双向绑定，当你选择一个选项时会触发 selectionChange

如果您想使用事件打印值，只需更改函数

【讨论】：

【解决方案2】：

对您的模板文件执行此操作。

<select (change)="onChange($event.target.value)"  >
   <option  value="All" >All</option>
   <option  value="Specialist" >Specialist</option>
   <option  value="General practitioner">General practitioner</option>
</select>

在您的 .ts 文件中

 onChange(res){
    console.log(res);
  }

【讨论】：