使垫选项和垫选择具有不同的 UI

Question

我有一个下拉菜单，其中有电话号码的国家/地区代码。目前我希望所选项目仅具有标志图像或代码。下拉列表包含图像、国家/地区代码和国家/地区名称。

<mat-form-field appearance="outline" fullWidth>
  <mat-label>Country Code</mat-label>
  <mat-select #matSelect [(value)]="selectedCode" [formControlName]="helperService.appConstants.countryCode" (selectionChange)="changeSelection(selectedCode)" required>
    <mat-option *ngFor="let code of countryCode" [value]="code.calling_code" (keypress)="numberOnly($event)&&phoneNumberValid(registerObj.userForm)">
      <img with="10px" height="10px" src="{{code.flag}}"> {{ code.country }} ({{code.calling_code}})
    </mat-option>
  </mat-select>
</mat-form-field>

这就是我正在编写的代码。我也有当前用户界面的图像。它们附在下面。

我希望所选项目如下图所示。我不知道应该更改什么以使所选项目仅显示图像。

Answer 1

尝试添加<mat-select-trigger>：

    <mat-select-trigger>
       <img with="10px" height="10px" src="{{code.flag}}">
    </mat-select-trigger>

你的代码将是这样的：

<mat-form-field appearance="outline" fullWidth>
  <mat-label>Country Code</mat-label>
  <mat-select #matSelect [(value)]="selectedCode" [formControlName]="helperService.appConstants.countryCode" (selectionChange)="changeSelection(selectedCode)" required>
    <!-- Add mat-select-trigger here start -->
    <mat-select-trigger>
       <img with="10px" height="10px" src="{{code.flag}}">
    </mat-select-trigger>
     <!-- Add mat-select-trigger here end -->
    <mat-option *ngFor="let code of countryCode" [value]="code.calling_code" (keypress)="numberOnly($event)&&phoneNumberValid(registerObj.userForm)">
      <img with="10px" height="10px" src="{{code.flag}}"> {{ code.country }} ({{code.calling_code}})
    </mat-option>
  </mat-select>
</mat-form-field>

恭喜你提出了一个非常好的问题！