PrimeNG p-dropdown绑定对象类型ngModel时无法正确显示选中标签

我之前也碰到过一模一样的问题！核心原因是PrimeNG的p-dropdown在匹配选中项时，默认采用对象引用匹配，而不是值匹配——哪怕你的selectedCity和数组里某个选项的内容完全一致，只要不是同一个对象实例，组件就会判定不匹配，最后默认选中第一个选项。

问题分析 #

看你的代码，cities数组里的每个选项的value都是一个独立的对象。如果你是这样设置selectedCity的：

// 错误示例：新建了一个对象，不是数组里的引用
this.selectedCity = {id:3, name: 'London', code: 'LDN'};

那JS会认为这个新对象和cities里的London对象是两个不同的引用，组件匹配失败，就会默认选中第一个选项。

解决方案 #

这里有两种可行的解决办法，根据你的场景选择：

1. 直接引用数组中的对象实例

如果你的选中项是从现有数组里选的，直接取数组里的对象引用赋值给selectedCity：

// 方式1：通过find匹配id获取
this.selectedCity = this.cities.find(city => city.value.id === 3).value;

// 方式2：直接通过数组索引获取（如果知道位置的话）
this.selectedCity = this.cities[2].value;

2. 使用compareWith自定义匹配规则

如果selectedCity是从后端接口获取的（不是数组里的引用），就需要给p-dropdown添加compareWith属性，告诉组件如何判断两个对象相等：

修改后的HTML代码：

<p-dropdown 
  [options]="cities" 
  [(ngModel)]="selectedCity" 
  optionLabel="name" 
  [showClear]="true"
  [compareWith]="compareCities"
></p-dropdown>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>

TS代码中添加匹配方法：

compareCities(city1: any, city2: any): boolean {
  // 这里用id来判断两个城市对象是否相等，你也可以换成code等唯一标识
  return city1 && city2 ? city1.id === city2.id : city1 === city2;
}

这个方法会覆盖组件默认的引用匹配逻辑，只要两个对象的id相等，就会被判定为同一个选项。

额外注意点 #

确认你的optionLabel="name"是正确的——因为你的options里每个对象的value属性才包含name字段，组件会自动从value里读取name作为显示标签，这部分你的代码是没问题的。

试试上面的方法，应该就能解决你的问题了！我当时用compareWith解决了后端返回数据的场景，亲测有效～

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