如何在角材料中显示图标选择 <mat-option> 并选择相同的答案

【问题标题】：How to display icon inside angular material select <mat-option> and selection of the same如何在角材料中显示图标选择 <mat-option> 并选择相同的
【发布时间】：2022-04-01 07:12:07
【问题描述】：

如何使用材质选择控件在选择下拉控件中正确显示图标。选择 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>

【问题讨论】：

解决问题了吗
没有。我试过了，但它根本没有显示选定的值。
那里有什么解决办法吗？我目前遇到了完全相同的问题

标签： angular angular-material2

【解决方案1】：

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

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

mat-select-trigger.

上的更多文档

【讨论】：

哇，这很复杂，甚至不起作用，不是回答者的错——只是垫子设计是一个哈希工作

【解决方案2】：

完整代码

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

        <!-- MUST USE mat-select-trigger TO SHOW mat-icon -->
        <mat-select-trigger *ngIf="gender.value === 'f'">
            <mat-icon>pregnant_woman</mat-icon>&nbsp;{{gender.name}}
        </mat-select-trigger>
    </mat-select>
</mat-form-field>

【讨论】：

你如何在 mat select 触发器中显示 gender.name？

【解决方案3】：

就像其他人说的那样，您需要使用 mat-select-trigger 来显示设置选项后该字段的外观。

此代码在我们的项目中有效：

<mat-form-field appearance="outline" style="width: 100%">
    <mat-label>Work Ownership</mat-label>
    <mat-select [formControl]="missionForm.controls.type">
        <mat-option *ngFor="let type of missionTypes" [value]="type">
            <mat-icon *ngIf="type == 'individual'">person</mat-icon>
            <mat-icon *ngIf="type == 'group'">groups</mat-icon>
              {{ type }}
        </mat-option
            >
            <mat-select-trigger> {{ missionForm.controls.type.value }} </mat- 
            select-trigger>
    </mat-select>
</mat-form-field>

【讨论】：