角材料 - MatSelect 中的 matIcon [英] Angular Material - matIcon in MatSelect
问题描述
我在我的 Angular 5 应用程序中使用了这个角度材质选择:
I use this angular material select in my Angular 5 application:
<mat-form-field style="width:88%;">
<mat-select placeholder="Contact *" formControlName="contact">
<mat-option *ngFor="let contact of contacts" [value]="contact">
<mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}}
</mat-option>
</mat-select>
</mat-form-field>
在选择面板上
按预期列出,但如果我选择一个选项,则 home 图标不会出现在 <;mat-form-field>
On the select panel <mat-icon>
are listed as expected but if I select one option then the home icon does not appear in <mat-form-field>
如何在<mat-form-field>
中查看主页图标一旦被选中?
How could I also view the home icon in <mat-form-field>
once selected?
推荐答案
这可以通过mat-select-trigger"选项来完成.可以在此处找到有关mat-select"的文档.
This can be accomplished via the "mat-select-trigger" option. Documentation on the "mat-select" can be found here.
https://material.angular.io/components/select/api#MatSelectTrigger
下面应该是您正在尝试做的工作的示例.根据您提供的内容.
Below should be a working example of what you are trying to do. Based on what you provided.
<mat-form-field style="width:88%;">
<mat-select placeholder="Contact *" formControlName="contact">
<mat-select-trigger>
<mat-icon>home</mat-icon> {{contact.institution}}
</mat-select-trigger>
<mat-option *ngFor="let contact of contacts" [value]="contact">
<mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}}
</mat-option>
</mat-select>
</mat-form-field>
并根据需要应用样式.
这篇关于角材料 - MatSelect 中的 matIcon的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!