首页 > 解决方案 > 如何在角度材料选择中显示图标和相同的选择

问题描述

如何使用材质选择控件在选择下拉控件中正确显示图标。选择 mat 选项后,它选择图标的文本以及如何克服这个问题?

            <mat-form-field>
                <mat-select formControlName="genderFormControl" placeholder="Gender">
                    <mat-option>None</mat-option>
                    <mat-option *ngFor="let gender of genders" [value]="gender.value">
                            <mat-icon matListIcon>pregnant_woman</mat-icon>
                            {{gender.name}}
                    </mat-option>
                </mat-select>
            </mat-form-field>

在此处输入图像描述


在此处输入图像描述

标签: angularangular-material2

解决方案


您可以通过"mat-select-trigger"选项完成它。

  <mat-select-trigger>
      <mat-icon>pregnant_woman</mat-icon>&nbsp;{{gender.name}}
   </mat-select-trigger>

更多文档mat-select-trigger.


推荐阅读