如何让p-multiSelect下拉框显示选中项的label而非id数值

根因分析 #

当前p-multiSelect默认取options配置里的value字段（也就是你映射的obj.id）存入selectedObjectif1数组，所以直接输出这个变量只会展示选中的id值，不会自动关联对应的label。如果连组件输入框内部都显示id而非label，是因为没有显式指定展示用的字段。

修复方案 #

第一步 补全组件属性（解决输入框内显示id的问题） #

给p-multiSelect添加optionLabel属性，显式指定用label字段作为展示文本：

<p-multiSelect [options]="listObjectif" [(ngModel)]="selectedObjectif1" optionLabel="label" [ngModelOptions]="{standalone: true}"
                         [selectionLimit]=3 [panelStyle]="{minWidth:'12em'}" [maxSelectedLabels]=5></p-multiSelect>

第二步 处理下方自定义展示的label #

根据你的业务需要二选一即可：

方案A：修改绑定逻辑，直接绑定完整选项对象（推荐）

后续不需要额外写转换逻辑，提交时再单独提取id即可：

1. 修改TS代码里的变量类型

listObjectif: any[]=[];
// 把字符串数组改成对象数组
selectedObjectif1: {value: number, label: string}[] = []; 

Selectobjectif() {
    this.ObjectifService.findAll().then((res)=>{
      this.listObjectif = res.map(function (obj:any) {
        return {
          value: obj.id,
          label: obj.libelle
        };
      });
    });
  } 

2. 修改HTML里的展示逻辑，直接取对象的label字段拼接

<p>Selected Cities: {{ selectedObjectif1.map(item => item.label).join(', ') }}</p>

提交接口需要传id数组时，提前处理即可：

const submitIds = this.selectedObjectif1.map(item => item.value);

方案B：保留现有id绑定逻辑，新增转换方法

如果不想改动现有存id的逻辑，新增转换方法把id转成对应label即可：

1. TS文件新增转换方法

getSelectedLabels(): string {
  return this.selectedObjectif1.map(id => {
    const target = this.listObjectif.find(item => item.value === id);
    return target ? target.label : '';
  }).filter(Boolean).join(', ');
}

2. HTML调用方法展示

<p>Selected Cities: {{ getSelectedLabels() }}</p>

注意要确保listObjectif数据加载完成后再调用该方法，避免匹配不到对应项。

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