Angular 14中如何显示viewValue而非value，同时保留value用于TS逻辑

核心思路 #

保留[value]="program.value"的绑定，确保TypeScript中能拿到用于调用存储过程的value值；页面显示时，通过选中的value值反向匹配对应的viewValue进行展示。

错误原因说明 #

你之前尝试[value]="{{program.viewValue}}"报错，是因为Angular属性绑定（[]）内部直接写表达式即可，不需要嵌套插值语法{{}}。但即便改成[value]="program.viewValue"，会导致selectedProgram存储的是viewValue，无法满足获取value调用存储过程的需求，所以这不是正确方向。

代码修改方案 #

1. HTML模板修改

将显示选中项的部分替换为通过value匹配viewValue的逻辑：

<div>
  <small class="example-additional-selection-no-border">
    These are the programs selected: 
    <b>
      {{ selectedProgram.map(v => programsList.find(p => p.value === v)?.viewValue).join(', ') }}
    </b>
  </small>
</div>

如果programsList是数组且value为唯一标识，这段代码会遍历selectedProgram中的每个value，找到对应的program对象并取出viewValue，最后用逗号拼接显示。

2. TypeScript辅助方法（可选）

若觉得模板表达式过长，可在组件类中添加方法获取选中的viewValues：

getSelectedViewValues(): string[] {
  return this.selectedProgram.map(value => {
    const program = this.programsList.find(p => p.value === value);
    return program ? program.viewValue : '';
  });
}

然后在模板中调用：

<div>
  <small class="example-additional-selection-no-border">
    These are the programs selected: 
    <b>{{ getSelectedViewValues().join(', ') }}</b>
  </small>
</div>

3. 保留原有绑定确保获取value

确保mat-option的[value]依然绑定program.value，这样selectedProgram（或selectFormControl.value）中存储的就是调用存储过程所需的value数组：

<mat-option *ngFor="let program of programsList" [value]="program.value" class="example-additional-selection2">
  {{program.viewValue}}
</mat-option>

额外提示 #

你同时使用了[(value)]="selectedProgram"和[formControl]="selectFormControl"，两者都是控制选中值的方式，建议统一使用其中一种避免冲突。比如用formControl的话，选中值可通过selectFormControl.value获取，无需双向绑定[(value)]。

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