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>列出了预期，但如果我在<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>

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

角度材质 - MatSelect中的matIcon

4 个答案: