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

Question

我尝试使用角度选择材料，我需要将图标动态添加到选项中，并在选择时显示它 我的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>

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

房屋是选择值，房屋是图标名称，但需要显示类似内容

Answer 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

Answer 2

要实现此目的，您需要使用“ mat-select-trigger”选项，如下所示，MatSelectTrigger

我也创建了演示来实现此目的，请参考相同的内容： stackblitz网址：Demo

Answer 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