如何在角形材质中显示图标选择<mat-option>并选择相同的选项

Question

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

---

Answer 1

您可以通过 "mat-select-trigger" 选项完成此操作。

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

有关 mat-select-trigger.

的更多文档

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