Angular实现下拉选中项仅显示电话代码的方法

原生<select>标签无法单独设置选中项的显示内容（它会直接复用<option>里的文本），要实现你要的效果，最简便的方式是使用Angular Material的mat-select组件，它支持自定义选中后的展示内容。

步骤1：引入Angular Material #

如果还未安装，先执行安装命令：

npm install @angular/material @angular/cdk

然后在你的模块中导入所需组件：

import { MatSelectModule } from '@angular/material/select';
import { MatOptionModule } from '@angular/material/core';

@NgModule({
  imports: [
    // 其他模块
    MatSelectModule,
    MatOptionModule
  ]
})
export class YourModule { }

步骤2：替换原生select为mat-select #

通过mat-select-trigger自定义选中后的显示内容，下拉选项仍保留完整的国家名+电话码：

<mat-select [(ngModel)]="phoneCode" name="paises">
  <!-- 选中后仅显示电话代码 -->
  <mat-select-trigger>
    +{{phoneCode}}
  </mat-select-trigger>
  <!-- 下拉选项展示完整信息 -->
  <mat-option *ngFor="let pais of (paises$ | async)" [value]="pais.phonecode">
    {{pais.nicename}} (+{{pais.phonecode}})
  </mat-option>
</mat-select>

备选方案：自定义原生模拟下拉框 #

如果不想引入第三方库，也可以用HTML+CSS+TS手动实现：

<div class="custom-select" [class.open]="isOpen">
  <!-- 选中状态显示区域 -->
  <div class="selected-value" (click)="isOpen = !isOpen">
    +{{phoneCode}}
  </div>
  <!-- 下拉选项列表 -->
  <div class="options" *ngIf="isOpen">
    <div 
      class="option" 
      *ngFor="let pais of (paises$ | async)" 
      (click)="selectPais(pais.phonecode)"
    >
      {{pais.nicename}} (+{{pais.phonecode}})
    </div>
  </div>
</div>

对应的TS逻辑：

phoneCode: string;
isOpen = false;

selectPais(code: string) {
  this.phoneCode = code;
  this.isOpen = false;
}

基础CSS样式：

.custom-select {
  position: relative;
  width: fit-content;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.selected-value {
  padding: 8px 12px;
  cursor: pointer;
}
.options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  background: white;
  z-index: 100;
}
.option {
  padding: 8px 12px;
  cursor: pointer;
}
.option:hover {
  background: #f5f5f5;
}
.open .selected-value {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

内容的提问来源于stack exchange，提问作者Victor Say