从 Angular 的下拉列表中获取选定的值答案

【问题标题】：Get selected value from a drop-down list in Angular从 Angular 的下拉列表中获取选定的值
【发布时间】：2018-10-12 14:53:24
【问题描述】：

我对 Angular 很陌生，并且有一个要求，我需要从下拉列表中读取选定的值，并在路由时将选定的值发送到组件。有人能告诉我如何从列表中提取选定的值吗？

这是下拉列表的sn-p：

<div class="dropdown-content">
                <a [routerLink]="['/schedulemanagement/autoStartStopVm']">Auto Start</a>
                <a href="#">Auto Shutdown</a>
                <a href="#">Auto Scale</a>
            </div>

【问题讨论】：

Angular 2: How to get the selected value from different options of a form?的可能重复

标签： angular

【解决方案1】：

以下是您两个问题的解决方案：

获取下拉值。
通过路由发送参数

第一个问题绑定下拉列表的解决方案：

组件：

import { Component } from '@angular/core';
import { Router } from '@angular/router';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(private route: Router){ }

  selectedLevel;
  data:Array<Object> = [
      {id: 0, name: "name1"},
      {id: 1, name: "name2"}
  ];

  selected(){
    console.log(this.selectedLevel)
  }
 }

HTML：

<h1>Drop Down</h1>
<select [(ngModel)]="selectedLevel" (change)="selected()">
    <option *ngFor="let item of data" [ngValue]="item">{{item.name}}</option>
</select>
{{selectedLevel | json}}

Here is a working DEMO

第二个问题的解决方案 To send Params to Route：

来自组件：

this.route.navigate(['schedulemanagement/autoStartStopVm/' + data]);

所以，选择的函数将是，

  selected(){
    console.log(this.selectedLevel)
   this.route.navigate(['schedulemanagement/autoStartStopVm/' + data]);
  }

来自 HTML：

<a [routerLink]="[schedulemanagement/autoStartStopVm/', selectedLevel]">Person</a>

【讨论】：

@Debo，如果你觉得我的回答有用，可以接受。
@Kapilsoni，很高兴为您提供帮助。 :-)
gettting 错误，无法绑定到 select，因为它不是 select 的已知属性。如何解决？
问题已解决。我没有在 module.ts 中包含 FormsModule，谢谢@Sravan

【解决方案2】：

我相信您正在使用带有 Angular 的引导程序。不是<select> </select>。一个简单的解决方案是点击链接。

html:

<div class="dropdown-content">
                <a (click)="getSelectedDropdown('1') [routerLink]="['/schedulemanagement/autoStartStopVm']">Auto Start</a>
                <a (click)="getSelectedDropdown('2') href="#">Auto Shutdown</a>
                <a (click)="getSelectedDropdown('3') href="#">Auto Scale</a>
            </div>

component.ts:

getSelectedDropdown(link) {
        alert(link);    
  }

【讨论】：

【解决方案3】：

试试这个，
HTML：

<a [routerLink]="['/schedulemanagement/autoStartStopVm']" (click)="testEvent($event)">Test Event Link</a>

TS：

testEvent(event) {
console.log(event) //check the event object and get your required values.
}

【讨论】：