如何让PrimeNG下拉菜单列表不区分大小写并按字母排序？

你当前的问题出在错误使用了sortField属性，这个属性是用来指定排序的字段名称（比如"value"），而非绑定自定义比较函数。PrimeNG的p-dropdown组件提供了专门的sortFunction属性来接收自定义排序逻辑，具体修正步骤如下：

1. 修正模板代码 #

将模板中的sortField="compareFn()"替换为[sortFunction]="compareFn"，注意这里是绑定函数引用，不需要加括号：

<p-dropdown
    [options]="persons"
    optionLabel="value"
    [sortFunction]="compareFn"
    [(ngModel)]="selectedPerson"
></p-dropdown>

2. 保留原有比较函数 #

你的compareFn逻辑是正确的，无需修改：

compareFn(a: any, b: any): number {
    const aLower = a.value.toLowerCase();
    const bLower = b.value.toLowerCase();
    if (aLower > bLower) {
        return 1;
    } else if (aLower < bLower) {
        return -1;
    } else {
        return 0;
    }
}

备选方案：提前排序数组 #

如果不想依赖组件的排序属性，也可以在组件初始化时直接对persons数组进行不区分大小写排序，再传给下拉菜单：

ngOnInit(): void {
    this.persons.sort((a, b) => {
        const aLower = a.value.toLowerCase();
        const bLower = b.value.toLowerCase();
        return aLower.localeCompare(bLower);
    });
}

模板中就不需要设置sortFunction或sortField了，直接使用排序后的数组即可。

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