动态隐藏 mat-optGroup 的标签

问题描述

我正在使用 mat-optgroup 和 mat-option 来创建一个使用角度材料的下拉列表。在一种情况下，我将 mat-optgroup 的标签设为空。在这种情况下，我不想显示标签。在 mat-optgroup 中是否可以选择仅显示/隐藏标签（不是它的选项）？

<mat-optgroup [class.active]="attributeGroup.groupName != ''" *ngFor="let attributeGroup of
filteredAttributeList | async"
              [label]="attributeGroup.groupName">
    <mat-option class="search-filter-options"
            *ngFor="let attribute of attributeGroup.groupValues"
            [value]="attribute.value">{{attribute.id}}</mat-option>
</mat-optgroup>

解决方法

您可以在 attributeGroup.group 为空时添加类，然后使用 ::ng-deep 使用 css 隐藏标签。

<mat-optgroup *ngFor="let group of pokemonGroups"
              [class.hideLabel]="group.name == ''"
              [disabled]="group.disabled"
              [label]="group.name">
  <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
    {{pokemon.viewValue}}
  </mat-option>
</mat-optgroup>

::ng-deep .mat-optgroup.hideLabel .mat-optgroup-label {
  display: none;
}

完整示例：https://stackblitz.com/edit/angular-vuc2br?file=src/app/select-optgroup-example.ts