Angular Select下拉实现选项显示code-description选中后仅展示code

核心思路：将下拉选项的渲染逻辑、选中区域的渲染逻辑和值绑定逻辑完全解耦，值始终绑定你需要的code字段，单独控制两个区域的展示内容即可，不需要修改原有传值逻辑。

场景1：使用原生select元素 #

原生select默认会把选中option的文本直接显示在触发区，无法直接单独修改触发区文本，通过透明原生select+自定义覆盖层的方式实现即可：

• 模板代码

<div class="select-container">
  <select [formControl]="selectedCode">
    <option *ngFor="let opt of options" [value]="opt.code">
      {{opt.code}}-{{opt.description}}
    </option>
  </select>
  <span class="trigger-text">{{ selectedCode.value }}</span>
</div>

• 组件逻辑

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-native-select-demo',
  templateUrl: './native-select-demo.component.html'
})
export class NativeSelectDemoComponent {
  options = [
    { code: 'A', description: 'Apple' },
    { code: 'B', description: 'Banana' },
    { code: 'C', description: 'Cherry' }
  ];
  selectedCode = new FormControl('');
}

• 样式代码

.select-container {
  position: relative;
  width: 180px;
  height: 32px;
}
.select-container select {
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.trigger-text {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

实现后下拉展开时会显示所有code-description格式的选项，选中后触发区仅显示code值，不影响原生下拉交互和表单取值。

场景2：使用Angular Material MatSelect组件 #

Angular Material的选择组件原生支持自定义触发区模板，不需要额外写CSS覆盖，是最简便的实现方式：

<mat-form-field style="width: 200px;">
  <mat-label>选项</mat-label>
  <mat-select [formControl]="selectedCode">
    <!-- 单独定义选中触发区的展示内容，仅显示code -->
    <mat-select-trigger>
      {{ selectedCode.value }}
    </mat-select-trigger>
    <!-- 下拉选项保持完整格式展示 -->
    <mat-option *ngFor="let opt of options" [value]="opt.code">
      {{opt.code}}-{{opt.description}}
    </mat-option>
  </mat-select>
</mat-form-field>

组件逻辑和原生场景一致，直接复用上面的options和FormControl定义即可。

如果使用NG-ZORRO、PrimeNG等其他Angular组件库，实现逻辑完全一致：找到组件提供的「自定义选中触发区模板」的对应API，单独给触发区绑定code的展示，下拉选项保持完整格式渲染即可，不需要修改value绑定规则。

内容的提问来源于stack exchange，提问作者Prasahnth Joshi