使用角度 4 处理选择框中的 optgroup答案

【问题标题】：Handle optgroup in select box with angular 4使用角度 4 处理选择框中的 optgroup
【发布时间】：2018-08-09 13:33:41
【问题描述】：

如何在角度 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 标签吗？

同样，一旦我们提交表单，我们会将插槽保存在数据库中，在编辑页面上，我们会通过数据绑定显示它，但由于多个 optgroup 可以有相同的插槽，它总是显示选择的第一个 optgroup 值

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

【问题讨论】：

选项列表中有重复值是一种奇怪的模式。我认为首先您应该为选项的值加上前缀，例如 previous-available-1000 / available-1500 等... optgroup 并不是要处理重复的选择值。那么@e.m.b 应该去工作了
@PierreMallet 是的，这似乎是处理它的唯一方法，但它需要大量编码，因为我用于绑定，现在必须使用函数来获取和设置值，可能是我将使用一些隐藏字段

标签： angular typescript data-binding

【解决方案1】：

您可以使用 VanillaJS 来实现这一点，在您的更改功能中写下：

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

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

【讨论】：

似乎可以获取标签名称，但是如果不同的 opt 组中有相同的值，我如何显示选择的值
您可以从事件参数中获取选定的值，也许您想连接两个字符串？这是一个例子：selectedOption = optGroupLabel + ev.target.value;我也更新了stackblitz
虽然如果 2 optgroup 中有重复值，我没有得到显示选项的解决方案，但它对我有用