角度材质 - MatSelect中的matIcon

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>