угловая 2 выбранная опция текста

Question

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

HTML

<div class="row left" *ngFor='let control of tabControls'> 
        <div class="col-md-3 text-left" style="border:1px dotted"> 
         {{control.DropDownTitle}} 
        </div> 
        <div class="col-md-9 text-left"> 
         <select [(ngModel)]="selected" (change)="onChange($event.target.value)"> 
          <option *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList.Value"> 
           {{controlList.Value}} 
          </option> 
         </select> 

        </div> 

компонент

onChange(selected: any) { 
     console.log('selected item ' + selected); 
    } 

Примечание: tabControls представляет собой интерфейс

в консоли распечатать

selected item 1: 2017 

однако, другие выборы (месяц Компания) теряет выбор

Answer 1

EDIT 2: Я просто заметил, что вы перебор закладок через *ngFor так есть на самом деле 3 выберите элементов, так что вам нужны 3 различных привязки ngModel.

Итак, сначала изменить тип вашей selected собственности внутри компоненты к array любым и инициализации его.

selected: any[] = []; 

Затем объявить индекс, I, на ваш * ngFor и привязать к ngModel selected[i]:

<div class="row left" *ngFor='let control of tabControls; let i = index'> 
       <div class="col-md-3 text-left" style="border:1px dotted"> 
        {{control.DropDownTitle}} 
       </div> 
       <div class="col-md-9 text-left"> 
        <select [(ngModel)]="selected[i]" (change)="onChange($event.target.value)"> 
         <option *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList.Value"> 
          {{controlList.Value}} 
         </option> 
        </select> 

       </div>