动态隐藏 mat-optGroup 的标签

【问题标题】：Hide mat-optGroup's label dynamically动态隐藏 mat-optGroup 的标签
【发布时间】：2021-06-22 23:17:18
【问题描述】：

我正在使用 mat-optgroup 和 mat-option 使用 Angular 材质创建下拉菜单。在一种情况下，我将 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>

【问题讨论】：

标签： angular angular-material angular-material2 angular-material-5 angular-material-7

【解决方案1】：

可以在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

【讨论】：