Angular 14.2多选下拉框如何获取viewValue而非value值

你当前代码里，多选下拉框绑定的是program.value，且selectedProgram定义为字符串，不符合多选场景的数组类型要求。以下两种方案可帮你获取选中项的viewValue：

方案一：通过选中的value匹配viewValue #

修改TypeScript代码 #

修正selectedProgram的类型为数组，同时更新表单控件类型，并添加匹配viewValue的计算属性：

export class AffinityProgramsComponent {
  title = 'Affinity Program Extension Form';
  affinityForm = new FormGroup({
    cid!: new FormControl('', Validators.required),
    affinityprogramid!: new FormControl('', Validators.required),
  })

  // 多选场景下，表单控件类型应为字符串数组或null
  selectFormControl = new FormControl<string[] | null>(null, Validators.required);

  // 存储选中的value数组
  selectedProgram: string[] = [];

  programsList: Program[] = [
    { value: '2', viewValue: 'Merchant card connect' },
    { value: '9', viewValue: 'xx credit card credit reporting' },
    { value: '28', viewValue: 'Legal services' },
    { value: '27', viewValue: 'Hx' },
    { value: '3', viewValue: 'xx' },
    { value: '25', viewValue: 'xxxx Executive Groups' },
    { value: '24', viewValue: 'xx Coverage' },
    { value: '26', viewValue: 'xxforce' },
    { value: '22', viewValue: 'HxxB' }
  ];

  // 通过value数组匹配对应的viewValue
  get selectedProgramNames(): string[] {
    return this.selectedProgram.map(value => {
      const matchedProgram = this.programsList.find(p => p.value === value);
      return matchedProgram ? matchedProgram.viewValue : '';
    });
  }
}

修改HTML模板 #

更新展示部分，使用计算属性显示选中的文本：

<mat-form-field appearance="fill" class="example-additional-selection">
  <mat-label class="example-additional-selection-no-border">Affinity Program</mat-label>
  <mat-select multiple class="example-additional-selection-no-border" required [formControl]="selectFormControl" [(value)]="selectedProgram">
    <mat-option *ngFor="let program of programsList" [value]="program.value" class="example-additional-selection2">
      {{program.viewValue}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="selectFormControl.hasError('required')">Please choose an program</mat-error>
</mat-form-field>
<div><small class="example-additional-selection-no-border">These are the programs selected: {{selectedProgramNames.join(', ')}}</small></div>

方案二：直接绑定整个Program对象 #

这种方式更直接，选中项为完整的Program对象，无需额外匹配。

修改TypeScript代码 #

export class AffinityProgramsComponent {
  title = 'Affinity Program Extension Form';
  affinityForm = new FormGroup({
    cid!: new FormControl('', Validators.required),
    affinityprogramid!: new FormControl('', Validators.required),
  })

  // 多选场景下，表单控件类型应为Program数组或null
  selectFormControl = new FormControl<Program[] | null>(null, Validators.required);

  // 存储选中的Program对象数组
  selectedProgram: Program[] = [];

  programsList: Program[] = [
    { value: '2', viewValue: 'Merchant card connect' },
    { value: '9', viewValue: 'xx credit card credit reporting' },
    { value: '28', viewValue: 'Legal services' },
    { value: '27', viewValue: 'Hx' },
    { value: '3', viewValue: 'xx' },
    { value: '25', viewValue: 'xxxx Executive Groups' },
    { value: '24', viewValue: 'xx Coverage' },
    { value: '26', viewValue: 'xxforce' },
    { value: '22', viewValue: 'HxxB' }
  ];
}

修改HTML模板 #

将mat-option的[value]绑定为整个program对象，展示时直接提取viewValue：

<mat-form-field appearance="fill" class="example-additional-selection">
  <mat-label class="example-additional-selection-no-border">Affinity Program</mat-label>
  <mat-select multiple class="example-additional-selection-no-border" required [formControl]="selectFormControl" [(value)]="selectedProgram">
    <mat-option *ngFor="let program of programsList" [value]="program" class="example-additional-selection2">
      {{program.viewValue}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="selectFormControl.hasError('required')">Please choose an program</mat-error>
</mat-form-field>
<div><small class="example-additional-selection-no-border">These are the programs selected: {{selectedProgram.map(p => p.viewValue).join(', ')}}</small></div>

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