Angular实现下拉选择时与选中后显示不同内容的方法

完全可行，以下提供两种适配不同场景的实现方案：

方案一：原生Select自定义外观（无第三方依赖） #

如果项目不使用UI组件库，可通过自定义外观模拟需求效果，同时保持ngValue绑定完整对象：

1. 组件类代码 #

import { Component, OnInit } from '@angular/core';
import { IVersichertenstatus } from './your-model-path';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  rezept = {
    kunde: {
      versichertenstatus1: null as IVersichertenstatus | null
    }
  };
  versichertenstatus1: IVersichertenstatus[] = [
    // 示例数据
    { name: '状态A', kennung: 'A001' },
    { name: '状态B', kennung: 'B002' }
  ];
  selectedKennung: string = '';

  ngOnInit() {
    // 初始化选中项的显示文本
    if (this.rezept.kunde.versichertenstatus1) {
      this.selectedKennung = this.rezept.kunde.versichertenstatus1.kennung;
    }
  }

  onSelectChange() {
    // 选中后更新显示文本
    this.selectedKennung = this.rezept.kunde.versichertenstatus1?.kennung || '';
  }
}

2. HTML模板 #

<div class="custom-select-wrapper" (click)="selectEl.click()">
  <span class="selected-display">{{selectedKennung || '请选择'}}</span>
  <select #selectEl 
          class="hidden-native-select" 
          [(ngModel)]="rezept.kunde.versichertenstatus1" 
          name="kunde_vstatus1"
          (change)="onSelectChange()">
    <option *ngFor="let vstatus of versichertenstatus1" [ngValue]="vstatus">
      {{vstatus.name}} - {{vstatus.kennung}}
    </option>
  </select>
</div>

3. CSS样式 #

.custom-select-wrapper {
  position: relative;
  display: inline-block;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  min-width: 150px;
  cursor: pointer;
  background-color: #fff;
}

.selected-display {
  display: block;
  pointer-events: none;
}

.hidden-native-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

这种方案通过隐藏原生select，用自定义div模拟选中后的显示效果，下拉时仍使用原生select的选项列表，既满足显示需求，又保持了完整对象的双向绑定。

方案二：Angular Material Mat-Select（推荐） #

如果项目已引入Angular Material，这是更简洁优雅的实现方式，Mat-Select原生支持自定义选中后的显示模板：

1. 模块导入 #

确保在你的模块中导入所需依赖：

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

@NgModule({
  imports: [
    FormsModule,
    MatSelectModule,
    MatOptionModule
  ]
})
export class YourModule { }

2. HTML模板 #

<mat-select class="vstatus-select" 
            [(ngModel)]="rezept.kunde.versichertenstatus1" 
            name="kunde_vstatus1">
  <!-- 自定义选中后的显示内容 -->
  <mat-select-trigger>
    {{rezept.kunde.versichertenstatus1?.kennung || '请选择'}}
  </mat-select-trigger>
  <!-- 下拉选项显示完整内容 -->
  <mat-option *ngFor="let vstatus of versichertenstatus1" [value]="vstatus">
    {{vstatus.name}} - {{vstatus.kennung}}
  </mat-option>
</mat-select>

此方案无需额外CSS或事件处理，直接通过mat-select-trigger定义选中后的显示内容，下拉选项保持原有格式，同时[(ngModel)]绑定的是完整的IVersichertenstatus对象，完全符合需求。

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