Mat-select不会在选择其中一个选项上显示图标

问题描述 投票:0回答:1

我正在使用图标选项实现选择输入,但是当选择其中一个选项时,图标将显示为文本。

<mat-form-field>
  <mat-select MatInput [(ngModel)]="element.gender" [value]="element.gender">   
    <mat-option value="Male">
        <mat-icon>home</mat-icon> Home
    </mat-option>
    <mat-option value="Female">
        <mat-icon>face</mat-icon> Face
    </mat-option>
  </mat-select>
</mat-form-field>

我也尝试将选项值设置为[value]="'Male'",但它没有用。

这是一个Stakblitz可编辑Stakblitz

angular typescript angular-material2
1个回答
0
投票

Angular团队没有提供任何特定的方法来做到这一点。你可以在这里查看another question类似的东西。

话虽这么说,如果你考虑使用Emojis,它有一个轻量级和非常简单的解决方法。你可以在Emojipedia上获得几乎所有mat-icon的Emojis。

<p>
  It must shows the icon near by the selected option, budoesn't!n't !
</p>
<mat-form-field>
    <mat-select MatInput [(ngModel)]="element.gender" [value]="element.gender"> 
        <mat-option [value]="'Male'">
            🏠 Home
        </mat-option>
        <mat-option value="Female">
            😃 Face
        </mat-option>
    </mat-select>
</mat-form-field>

You might want to check for its support though

© www.soinside.com 2019 - 2024. All rights reserved.