如何在p-dropdown的onChange事件中同时获取appleId与appleDesc？

方法1：移除optionValue，直接获取完整选项对象 #

如果业务场景允许绑定完整的苹果对象而非仅appleId，直接去掉optionValue="appleId"配置即可。此时onChange事件返回的event.value就是包含appleId和appleDesc的完整对象。

修改后的HTML： #

<p-dropdown 
  [options]="apples" 
  optionLabel="appleDesc" 
  (onChange)="onAppleChange($event)"
></p-dropdown>

对应的TS处理： #

onAppleChange(event: any) {
  const selectedApple = event.value;
  console.log('appleId:', selectedApple.appleId);
  console.log('appleDesc:', selectedApple.appleDesc);
}

方法2：保留optionValue，通过ID匹配原数组获取完整对象 #

如果必须保留optionValue="appleId"（比如表单提交需要单独传递appleId），可以在onChange事件中，利用拿到的appleId去原始苹果数组里查找对应的完整对象。

原HTML保持不变： #

<p-dropdown 
  [options]="apples" 
  optionValue="appleId" 
  optionLabel="appleDesc" 
  (onChange)="onAppleChange($event)"
></p-dropdown>

修改后的TS处理： #

// 假设你的苹果数组定义如下
apples = [
  { appleId: 1, appleDesc: '红富士' },
  { appleId: 2, appleDesc: '青苹果' }
];

onAppleChange(event: any) {
  const selectedAppleId = event.value;
  // 从原数组中匹配对应的对象
  const selectedApple = this.apples.find(apple => apple.appleId === selectedAppleId);
  if (selectedApple) {
    console.log('appleId:', selectedApple.appleId);
    console.log('appleDesc:', selectedApple.appleDesc);
  }
}

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