Angular Material Select如何将mat-option值关联到更长输出内容

核心思路：你当前的写法仅将短字符串绑定为选项值，要输出长文本只需把选项绑定为包含短值、显示名、完整描述的对象即可。

步骤1：在组件类（.ts文件）中定义结构化的选项数据 #

// 先定义选项的统一类型
interface SelectOption {
  value: string; // 短值，可用于提交给后端
  label: string; // 下拉框中显示的短文本
  fullDesc: string; // 存放你需要输出的长段落文本
}

// 组件内部变量定义
optionList: SelectOption[] = [
  {
    value: 'option1',
    label: 'Option 1',
    fullDesc: '这是选项1对应的完整长段落文本，你可以在这里放置任意需要展示的详细说明内容'
  },
  {
    value: 'option2',
    label: 'Option 2',
    fullDesc: '这是选项2对应的完整长段落文本，支持自定义任意长度、任意格式的描述内容'
  },
  {
    value: 'option3',
    label: 'Option 3',
    fullDesc: '这是选项3对应的完整长段落文本，可根据业务需求灵活调整内容细节'
  }
];

// 选中变量，类型为刚才定义的SelectOption
selected?: SelectOption;

步骤2：修改模板（.html文件）的绑定逻辑 #

<mat-form-field appearance="fill">
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <!-- 遍历选项列表，把整个对象绑定为option的值 -->
    <mat-option 
      *ngFor="let option of optionList" 
      [value]="option"
    >
      {{option.label}}
    </mat-option>
  </mat-select>
</mat-form-field>

<!-- 选中后直接取对应字段展示即可 -->
<p *ngIf="selected">你选中的短值: {{selected.value}}</p>
<p *ngIf="selected">你选中的完整长文本: {{selected.fullDesc}}</p>

如果有单独存储短值的需求，也可以通过监听选择事件单独赋值：

<!-- 模板中增加valueChange事件监听 -->
<mat-select [(value)]="selected" (valueChange)="onSelectChange($event)">

// 组件类中新增方法和变量
selectedValue: string = '';
selectedFullDesc: string = '';

onSelectChange(option: SelectOption) {
  if (option) {
    this.selectedValue = option.value;
    this.selectedFullDesc = option.fullDesc;
  } else {
    this.selectedValue = '';
    this.selectedFullDesc = '';
  }
}

内容的提问来源于stack exchange，提问作者Bora Bey Sarikaya