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

Question

我试图从下拉列表中获取选定的数据，但我不能。使用此代码，我将未定义为选定值。

(change)="selectChangeHandler($event)" 我正在尝试通过此获取值(value)。

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