角度材料 - 垫子中的垫子图标选择

Question

我在Angular 5应用程序中使用此角度材质选择：

<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>s被列为预期，但如果我选择一个选项而不是主页列在<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>

并根据需要应用样式。

Answer 2

您可以在表单字段中添加matPrefix：

<mat-form-field style="width:88%;">

    <span matPrefix style="margin-right: 8px;"><mat-icon>home</mat-icon></span>

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

如果图标是每个联系人的属性，例如contact.icon，那么您需要做更多的工作来将当前选定的联系人的图标属性绑定到mat-icon名称：

<mat-form-field style="width:88%;">

    <span *ngIf="select.value" matPrefix style="margin-right: 8px;"><mat-icon>{{select.value.icon}}</mat-icon></span>

    <mat-select #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>