角材料-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>

在选择面板上<mat-icon>会按预期列出，但如果我选择一个选项，则主页图标不会出现在<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>&nbsp;{{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屋！