PrimeNG 16.9.1下拉框[filter]使用问题：筛选报错且选中对象而非值

问题分析 #

开启[filter]="true"后报错option.toLowerCase is not a function，是因为Dropdown默认会尝试将整个选项对象转为字符串执行toLowerCase()，而对象没有该方法。添加optionLabel和filterBy能让组件明确过滤字段，解决报错，但此时组件默认绑定整个选项对象，而非单个值。

解决方案 #

使用optionValue属性指定选项对象中作为绑定值的字段，结合已有的optionLabel和filterBy，即可同时启用过滤功能并仅选中单个值：

模板代码

<p-dropdown 
  [options]="cities" 
  [filter]="true" 
  optionLabel="name" 
  filterBy="name"
  optionValue="value"
  [(ngModel)]="selectedCity"
></p-dropdown>

组件代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-dropdown-basic-demo',
  templateUrl: './dropdown-basic-demo.html'
})
export class DropdownBasicDemo {
  selectedCity: string; // 仅存储选项的value值，如'NY'
  cities = [
    { name: 'New York', value: 'NY' },
    { name: 'London', value: 'LDN' },
    { name: 'Paris', value: 'PRS' }
  ];
}

原理说明 #

• optionLabel：指定下拉列表中显示的文本字段
• filterBy：指定过滤功能依据的字段
• optionValue：指定双向绑定ngModel时要获取的字段值，而非整个选项对象

这样配置后，过滤功能正常工作，同时selectedCity只会存储你指定的单个值（示例中的value字段内容），而非整个选项对象。

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