Question

我拥有两个mat-select组的控制权mat-optgroup 其中有一个事件处理程序(selectionChange)="applicationSelected($event.value, i)。

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

Answer 1

没有一种简单直接的方法可以从selectionChange事件中了解该小组。它仅告诉您源（MatSelect）和所选值。但是，MatOption的onSelectionChange事件使您可以访问MatOption，而后者又可以访问MatOptionGroup。例如：

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

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

Answer 2

我也遇到了这个问题，但请记住，onSelectionChanged（）的预期行为如下：选择更改事件不仅在选择选项时被触发，在取消选择时也会被触发< / strong>。因此，当选择一个选项时，将触发两个事件：用户选择和现在取消选择的选项。这样，您将看到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; } }

Answer 3

我还认为mat-features不能轻松访问组值也很有趣，因为将选择选项分为某些组是所有组的想法，在许多情况下，用例是使用选定的选项在逻辑级别上包装组数据。

这是我的解决方案：

<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"}
  }

垫选择选择更改获取组角度

3 个答案: