Как я могу получить значение метки optgroup в функции onchange в поле выбора в angular 4

У меня есть следующее поле выбора в форме с несколькими датами в качестве группы опций и времени в 24-часовом формате для бронирования, например, 1000,1200 и 1400 на 10:00, 12:00 и 14:00 соответственно.

    <select class="form-control" formControlName="arrival_time" (change)="onSlotChange($event)">
        <option value="" data-date="" data-slot="">Select Arrival Time</option>
         <ng-container *ngIf="!availablePrevSlots">
            <optgroup label="{{availablePrevSlotDate}}">
               <option value=null hidden>-- No Slot Available --</option>
            </optgroup>
         </ng-container>
         <ng-container *ngIf="availablePrevSlots">
            <optgroup label="{{availablePrevSlotDate}}">
               <option value=null hidden>HH:MM</option>
               <option *ngFor="let slot of availablePrevSlots" [value]="slot">{{slotToString(slot)}}</option>
            </optgroup>
         </ng-container>
         <ng-container *ngIf="!availableSlots">
            <optgroup label="{{availableSlotDate}}">
               <option value=null hidden>-- No Slot Available --</option>
            </optgroup>
         </ng-container>
         <ng-container *ngIf="availableSlots">
            <optgroup label="{{availableSlotDate}}">
               <option value=null hidden>HH:MM</option>
               <option *ngFor="let slot of availableSlots" [value]="slot">{{slotToString(slot)}}</option>
            </optgroup>
         </ng-container>
         <ng-container *ngIf="!availableNextSlots">
            <optgroup label="{{availableNextSlotDate}}">
               <option value=null hidden>-- No Slot Available --</option>
            </optgroup>
         </ng-container>
         <ng-container *ngIf="availableNextSlots">
            <optgroup label="{{availableNextSlotDate}}">
                <option value=null hidden>HH:MM</option>
                <option *ngFor="let slot of availableNextSlots" [value]="slot">{{slotToString(slot)}}</option>
            </optgroup>
          </ng-container>
      </select>

Теперь я получаю выбранное значение времени / точки с помощью функции onchange, но я также хочу получить метку параметра. Есть ли какой-либо способ получить метку optgroup?

Также после отправки формы мы сохраняем слот в базе данных, а на странице редактирования мы показываем его с привязкой данных, но поскольку несколько optgroup могут иметь одинаковые слоты, он всегда показывает первое выбранное значение optgroup

Не знаю, как показать выбранное здесь точное значение optgroup.

4
Vikram 1 Мар 2018 в 16:10

1 ответ

Лучший ответ

Вы можете использовать VanillaJS для этого, в своей функции изменения напишите следующее:

const selectedIndex = ev.target.selectedIndex;
const optGroupLabel = ev.target.options[selectedIndex].parentNode.getAttribute('label');

А вот рабочий стекBlitz: https://stackblitz.com/edit/angular-64vvdn

5
Mehdi Benmoha 5 Мар 2018 в 19:35