角材质 - 垫选择中的垫图标

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> 按预期列出，但如果我选择一个选项，则 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>

并根据需要应用样式。

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

Answer 3

我遇到了同样的问题，我通过订阅响应式表单的联系人字段来修复，然后在这里更新你的对象的值。

我的模板

<mat-form-field appearance="fill">
  <mat-label>Avatar</mat-label>
  <mat-select formControlName="avatar">
    <mat-select-trigger>
      <mat-icon svgIcon="{{user.avatar}}"></mat-icon> {{user.avatar}}
    </mat-select-trigger>
    <mat-option *ngFor="let avatar of avatars" [value]="avatar">
      <mat-icon svgIcon="{{avatar}}"></mat-icon>{{avatar}}
    </mat-option>
  </mat-select>
</mat-form-field>

我的 TS 代码

this.contactForm.get('avatar').valueChanges.subscribe((value) => {
  this.user.avatar = value;
});

正如您所注意到的，我在这里使用所选值更新 user 对象，然后

<mat-icon svgIcon="{{user.avatar}}"></mat-icon> 

将由所选头像更新。

Answer 4

您可以在 mat-select-trigger 中添加条件：

  <mat-select matInput formControlName="status" placeholder="select status" required>
              <mat-select-trigger>
                          <ng-container [ngTemplateOutlet]="icons" [ngTemplateOutletContext]="{data:formControls.status.value}"></ng-container>
              </mat-select-trigger>

              <mat-option *ngFor="let currStatus of data.status" [value]="currStatus ">
                           <ng-container [ngTemplateOutlet]="icons" [ngTemplateOutletContext]="{data: currStatus}"></ng-container>
              </mat-option>
  </mat-select>

为避免重复代码，您可以在模板中设置 mat-icon 部分

<ng-template #icons let-data="data">
             <mat-icon *ngIf="data.key === taskStatus.WAITING">hourglass_empty</mat-icon>
             <mat-icon *ngIf="data.key === taskStatus.IN_PROGRESS">autorenew</mat-icon>
             <mat-icon *ngIf="data.key === taskStatus.COMPLETED">done</mat-icon>
             {{data.value}}
</ng-template>

在ts文件中：

  public get formControls() { return this.createTaskForm.controls; }