Angular - 如何在下拉菜单中选择值？答案

【问题标题】：Angular - how to get value selected in dropdown menu?Angular - 如何在下拉菜单中选择值？
【发布时间】：2019-11-26 23:42:36
【问题描述】：

目标：我希望能够让用户点击下拉列表中的一个值，这将根据选择更改他们所在网站的地址。

问题：我可以让它更改地址，但无论他们做出什么选择，它都会这样做。我希望它为每个选择转到不同的地址。

因此，如果他们选择“英语”，我希望它转到 site.com/en。如果他们选择西班牙语，我希望它转到 site.com/es

我尝试了什么：

我尝试了这个解决方案，以及它的许多变体：How to get Id of selected value in Mat-Select Option in Angular 5 我还查看了 Angular 材料文档，但该主题所需的所有内容都有些稀疏。

为什么无法识别特定选择？

HTML：

<mat-form-field class="right">
      <mat-select>
          <mat-option *ngFor="let language of languages" [value]="language.value" (selectionChange)="doSomething($event.value)">
              {{language.viewValue}}
          </mat-option>
    </mat-select>
</mat-form-field>

TypeScript：

doSomething(event) {
   //if value selected is spanish
   if(event.value == "es")
      this.routerService.navigate(['es/']);
}

【问题讨论】：

也许你的导航应该是this.routerService.navigate(['/es']);。您是否在控制台中遇到任何错误？
嗨@R.Richards，谢谢。我有一些事情要弄清楚具体地址，但主要问题实际上是我无法获得价值。控制台中没有错误。我放了console.log，但他们没有受到打击。一旦我尝试改变检测值的方法，它就不再起作用了。
这对您有帮助吗：stackoverflow.com/questions/50222738/…。看起来(selectionChange) 应该在mat-select 而不是mat-option

标签： angular typescript angular-material

【解决方案1】：

尝试将您的 selectionChanged 移动到您的选择，而不是选项：

<mat-form-field class="right">
      <mat-select (selectionChange)="doSomething($event)">
          <mat-option *ngFor="let language of languages" [value]="language.value" >
              {{language.viewValue}}
          </mat-option>
    </mat-select>
</mat-form-field>

https://material.angular.io/components/select/api#MatSelect

【讨论】：

【解决方案2】：

或者您可以使用 ngModel 直接在您的函数中访问值

<mat-form-field class="fullwidth" required>
  <mat-label>Select</mat-label>
  <mat-select [(ngModel)]="selectedItem" (ngModelChange)="onSelectChange(selectedItem)">
    <mat-option *ngFor="let obj of testArray" [value]="obj.value">
      {{obj.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

在您的 .ts 文件中

onSelectChange(value) {
//if value selected is spanish
  if(value == "es")
    this.routerService.navigate(['es/']);
}

【讨论】：