首页 文章

角度材质 - MatSelect中的matIcon

提问于
浏览
4

我在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> 列出了预期,但是如果我选择一个选项而不是 home 列在 <mat-form-field> 我现在的问题是如何在 <mat-form-field> 中查看主页图标

2 回答

  • 3

    这可以通过“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>
    

    并根据需要应用样式 .

  • 0

    您可以在表单字段中添加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>
    

相关问题