角度垫选择无法显示选择项目的图标答案

【问题标题】：angular mat-select can't show icon of select Item角度垫选择无法显示选择项目的图标
【发布时间】：2020-07-22 06:54:58
【问题描述】：

我尝试使用角度选择材质，我需要将图标动态添加到选项中并在选择时显示它我的 ts 代码：

<mat-form-field>
    <mat-select disableOptionCentering panelClass="dropDown-panel" (selectionChange)="onRoomChange($event.value)">
       <mat-option *ngFor="let type of roomTypes" [value]="type.roomTypeId">
                {{ type.faName }}
           <mat-icon>{{ type.icon }}</mat-icon>
       </mat-option>
    </mat-select>
</mat-form-field>

此代码将图标添加到选项列表，但选择其中一个时，显示图标名称而不是图标

home 是选择值，house 是图标名称，但需要显示这样的内容

【问题讨论】：

标签： angular angular-material

【解决方案1】：

使用mat-select-trigger。文档here

在onRoomChange 上设置selectedtype。

<mat-form-field>
    <mat-select disableOptionCentering panelClass="dropDown-panel" (selectionChange)="onRoomChange($event.value)">
    <mat-select-trigger>
          <span>{{selectedtype.faName}}</span>
          <mat-icon>{{selectedtype.icon}}</mat-icon>
        </mat-select-trigger>
       <mat-option *ngFor="let type of roomTypes" [value]="type.roomTypeId">
                {{ type.faName }}
           <mat-icon>{{ type.icon }}</mat-icon>
       </mat-option>
    </mat-select>
</mat-form-field>

working example

【讨论】：

能否请您通过ts文件完成您的回答

【解决方案2】：

要实现这一点，您需要使用“mat-select-trigger”选项，如下所示，MatSelectTrigger

我也创建了演示来实现这一点，请参考：堆栈闪电战网址：Demo

【讨论】：

【解决方案3】：

使用mat-select-trigger，参考Mat-Select-trigger

<mat-form-field style="width:200px;">
  <mat-select name="countryVaraible" [(value)]="selectedCountry" placeholder="Country" (selectionChange)="onRoomChange($event)">
   <mat-select-trigger>
     <span *ngIf="selectedValue" >
  {{selectedValue.full}}
 <mat-icon aria-hidden="false" aria-label="Example home icon">{{selectedValue.icon}}</mat-icon>
  </span>
</mat-select-trigger>
  <mat-option *ngFor="let country of countries" [value]="country">
      {{country.full}}
    </mat-option>
  </mat-select>
</mat-form-field>

找到完整的演示here

【讨论】：