Select-Option возвращает каждую опцию, а не только выбранную опцию

Question

Я создал список выбора с опциями, и когда опция выбрана, я хочу иметь возможность прочитать, какая опция была выбрана.
Когда я пытаюсь прочитать опцию, она возвращает полный список всех опций, которые были доступны для выбора.

Опции создаются из массива и отображаются с использованием *ngFor.

.component.html

<form action="">
    <select id ="fruitSelect" (change)="fruity()" name="fruitSelect" autofocus >
      <option>Enter/Select Fruit</option>
      <option  *ngFor="let fruit of fruits" value="fruit">{{fruit}}</option>
    </select>
  </form>

.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  fruits: any = ['Apple', 'Pear', 'Banana', 'Orange']

  fruity() {
    var e = document.getElementById("fruitSelect")
    console.log(e.textContent)
  }
}

Посмотреть пример здесь

В настоящее время это возвращает Enter/Select FruitApplePearBananaOrange, я хочу, например, Orange.

Как мне вернуть только выбранную опцию? Кроме того, я не хочу иметь кнопку отправки, я хочу, чтобы функция запускалась при изменении параметра, поэтому используется (change).

Answer 1

Вы должны установить [(ngModel)]="selectedFruit" (change)="fruity($event)" или (change)="fruity($event.target.value)"

Попробуйте:

<select id ="fruitSelect" (change)="fruity($event)" name="fruitSelect" autofocus [(ngModel)]="selectedFruit">
  <option>Enter/Select Fruit</option>
  <option  *ngFor="let fruit of fruits" [value]="fruit">{{fruit}}</option>
</select>

TS:

 fruity(selectedValue) {      
    console.log(selectedValue)
  }