Получить выбранное значение из раскрывающегося списка в Angular

Question

Я довольно новичок в Angular и у меня есть требование, где мне нужно прочитать выбранное значение из выпадающего списка и отправить выбранное значение компоненту во время маршрутизации. Может кто-нибудь сказать, как извлечь выбранное значение из списка?

Вот фрагмент раскрывающегося списка:

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

Answer 1

Попробуйте это,
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.
}

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

Answer 3

Вот решения для ваших вопросов:

• Чтобы получить раскрывающееся значение.
• Для отправки параметров по маршруту

Решение для первого выпадающего списка вопросов:

Компонент:

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}}

Вот рабочая ДЕМО

---

Решение вашего второго вопроса Чтобы отправить параметры в маршрут:

Из компонента:

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>