Question

目标：我希望能够让用户单击下拉菜单中的一个值，该值将根据选择内容更改其所在站点的地址。

问题：我可以通过它来更改地址，但是无论他们进行了什么选择，它都可以做到。我希望它针对每个选择都转到不同的地址。

因此，如果他们选择“英语”，我希望它可以访问site.com/cn。如果他们选择西班牙语，我希望它可以访问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/']);
}

Answer 1

尝试移动选择内容更改为选择内容，而不是选项：

<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

Answer 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/']);
}

角度-如何获得在下拉菜单中选择的值？

2 个答案: