访问下拉列表中的选定数据

Question

我正在尝试从下拉列表中获取所选数据，但我无法.使用此代码，我未定义为选定的值。

(change)="selectChangeHandler($event)"我试图通过这个获得价值.

<label class="badge">From</label>
<select  formControlName="depature-form" class="form-control" (change)="selectChangeHandler($event)" >
<option *ngFor="let val of airportOptions" [value]="val.id">{{val.airportName}}</option>
</select>

import {Component, OnInit } from '@angular/core';
import {FlightService} from "../../services/shared/flight.service";
import {ActivatedRoute} from "@angular/router";
import {TicketService} from "../../services/shared/ticket.service";
import {AirportService} from "../../services/shared/airport.service";
@Component({
selector: 'app-flight',
templateUrl: './flight.component.html',
styleUrls: ['./flight.component.css']
})
export class FlightComponent implements OnInit {
// route parameter options
selectedDay: string='';
// Dropdown values
airportOptions = [];
constructor(private route: ActivatedRoute,
private flightService : FlightService,
private ticketService: TicketService,
private airportService : AirportService,
) {
}
ngOnInit() {
this.loadAirports();
}
private loadAirports() {
this.airportService.getAll().subscribe(response => {
this.airportOptions = response;
})
}
selectChangeHandler(event : any ) {
this.selectedDay = event.target.value;
console.log(this.selectedDay);
}
}

我期待从下拉列表中选择数据，但实际输出未定义。

Answer 1

我找到了方法.它返回 null，我找到了索引并将其放入数组中。

selectChangeHandler(event : any ) {
this.selectedDay = event.target.value;
var selectedindex=event.target.selectedIndex;
console.log(this.airportOptions[event.target.selectedIndex]);
}