在 mat-tab 内带有 mat-select 的 mat-icon答案

【问题标题】：mat-icon with mat-select inside mat-tab在 mat-tab 内带有 mat-select 的 mat-icon
【发布时间】：2019-08-02 12:03:45
【问题描述】：

我在带有图标的标签标签上有带有下拉菜单的标签。

<mat-tab-group [selectedIndex]="0" animationDuration="2ms">
        <mat-tab>
            <ng-template mat-tab-label>
                <mat-icon>{{selectedOption}}</mat-icon>
                <mat-form-field>

                    <mat-select [(ngModel)]="selectedOption">
                        <mat-option value="dashboard" selected><mat-icon>dashboard</mat-icon>Dashboard</mat-option>
                        <mat-option value="people"><mat-icon>people</mat-icon>People</mat-option>
                    </mat-select>
                </mat-form-field>
            </ng-template>
            <ng-template matTabContent>
                {{selectedOption}}
            </ng-template>
        </mat-tab>
    </mat-tab-group>

当我从下拉列表中选择一个选项时 this（例如，选择仪表板）

我想在标签上显示带有图标的标题，例如

但标签标签显示图标和图标名称和标题，如

这是因为我在 mat-option 中添加了 mat-icon，因为我想在下拉菜单中显示一个图标。如何在标签标签上仅显示图标和标题？这里是stackblitz https://stackblitz.com/edit/angular-ht6mdk?file=src%2Findex.html 提前致谢

【问题讨论】：

不确定您的要求，但在选项卡标签中显示选择并不是一个好主意，因为它与材料设计概念相冲突。您可以考虑在选项卡中使用other layout components 点赞列表以使其更实用
我同意@UmutEsen。通过material.io。你可以检查一下是用户友好的，什么不是。

标签： angular angular-material

【解决方案1】：

您可以使用带有 mat-icon 的 svgIcons 指令以这种方式添加图标。它会起作用的。

<mat-select [(ngModel)]="selectedOption">
     <mat-option value="dashboard" selected>    
           <mat-icon svgIcons="dashboard"></mat-icon>Dashboard
     </mat-option>
     <mat-option value="people">
           <mat-icon svgIcons="people"></mat-icon>People
     </mat-option>
</mat-select>

Working_StackBlitz

【讨论】：