angular - 使用 Angular 4 处理选择框中的 optgroup

Question

如何在 Angular 4 的选择框上的 onchange 函数中获取 optgroup 标签值

我在表单中有以下选择框，其中包含多个日期作为选项组和 24 小时格式的时间用于预订，例如上午 10 点、中午 12 点和下午 2 点分别为 1000、1200 和 1400。

    <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 标签吗？

同样，一旦我们提交表单，我们就会将插槽保存在数据库中，并在编辑页面上使用数据绑定(bind)显示它，但由于多个 optgroup 可以具有相同的插槽，因此它始终显示第一个选择的 optgroup 值

不确定如何显示此处选择的确切 optgroup 值。

Answer 1

您可以使用 VanillaJS 来实现这一点，在您的更改函数中写入:

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

这是一个有效的 stackBlitz:https://stackblitz.com/edit/angular-64vvdn