我正在使用图标选项实现选择输入,但是当选择其中一个选项时,图标将显示为文本。
<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'"
,但它没有用。
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>