mat-select selectionChange 获取组角度答案

【问题标题】：mat-select selectionChange get group angularmat-select selectionChange 获取组角度
【发布时间】：2018-11-05 14:29:30
【问题描述】：

我通过两个mat-optgroup 组控制mat-select 它有一个事件处理程序(selectionChange)="applicationSelected($event.value, i)。

如何检测从哪个组中选择了选项？

【问题讨论】：

我没有在我的项目中使用 Angular Material，但我猜你可以使用 $event 来捕捉选中的组？
@Enima，谢谢。我也是这么想的，但是在 $event 对象中没有找到任何有用的字段。

标签： angular angular-material

【解决方案1】：

从selectionChange 事件中了解该组并不是一种简单、直接的方法。它只告诉您源 (MatSelect) 和选定的值。但是 MatOption 的 onSelectionChange 事件使您可以访问 MatOption，这反过来又可以访问 MatOptionGroup。例如：

<mat-option (onSelectionChange)="optionSelected($event)" ...>...</mat-option>

optionSelected(event: MatOptionSelectionChange) {
    console.log(event.source.group.label);
}

【讨论】：

【解决方案2】：

我也遇到过这个问题，但请记住，onSelectionChanged() 的预期行为如下：选择更改事件不仅会在选择选项时触发，也会在取消选择时触发。因此，选择选项后，将触发两个事件：用户选择和现在取消选择的选项。因此，您将看到 2 个事件被触发。其中第一个是所需的。您可以查看 event.isUserInput 是否设置为 true（所需事件），并将 group.name 发送到事件处理程序：

在你的组件 html 中：

<mat-select formControlName="category"
            required>
  <mat-optgroup *ngFor="let group of categoryGroups"
                [label]="group.name">
    <mat-option *ngFor="let category of group.options"
                [value]="category.value" (onSelectionChange)="onCategorySelection($event, group.name)">
       {{category.viewValue}}
    </mat-option>
  </mat-optgroup>

</mat-select>

还有你在组件类中绑定事件的函数：

 onCategorySelection(event: MatOptionSelectionChange, groupName: string) {
    if (event.isUserInput) {
      this.groupName = groupName; // event.source.group.label;
    }
  }

【讨论】：

【解决方案3】：

我还认为 mat-feature 不能轻松访问组值这有点可笑，因为组的所有想法都是将选择选项分隔到某些组，并且在许多情况下，用例是使用所选选项在逻辑级别包装组数据。

这是我的解决方案：

<mat-form-field >
  <mat-label>Filter By</mat-label>
  <mat-select  panelClass="" #choosedValue (valueChange)="doSomething1(choosedValue.value)" >
    <mat-option >-- None --</mat-option>
    <mat-optgroup  #group1 *ngFor="let group of filterData" [label]="group.viewValue"
                   style = "background-color: #0c5460">
      <mat-option #mmm *ngFor="let option of group.options" [value]="{value: option.value, groupValue: group.value}" >
        {{option.viewValue}}
      </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

和功能：

doSomething1(value: any){
    console.log("do something with ", value);//result: {value: "Honda", groupValue: "cars"}
  }

【讨论】：