Angular Material - 垫子选择中的垫子图标

Question

我在我的 Angular 5 应用程序中使用了这个 Angular Material 选择:

<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>按预期列出，但如果我选择一个选项，则 home 图标不会出现在 <mat-form-field> 中

如何在 <mat-form-field> 中查看主页图标？一旦选择？

Answer 1

这可以通过“mat-select-trigger”选项来完成。可以在此处找到有关“mat-select”的文档。

https://material.angular.io/components/select/api#MatSelectTrigger

下面应该是您正在尝试做的工作示例。根据您提供的内容。

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

并根据需要应用样式。