PrimeNG下拉框转大写后土耳其字符过滤异常求助

你遇到的问题核心是两点：一是过滤时未基于原始选项集处理，导致多次过滤后数据丢失；二是修改选项后未触发Angular变更检测，控制台显示过滤正确但界面不更新。结合你的代码，给出以下修正方案：

修正后的指令代码 #

import { Directive, HostListener, ChangeDetectorRef, OnInit } from '@angular/core';
import { Dropdown } from 'primeng/dropdown';

@Directive({
  selector: '[appDropdownTurkishFilter]'
})
export class DropdownFilterDirective implements OnInit {
  private originalOptions: any[] = [];

  constructor(private dropdown: Dropdown, private cd: ChangeDetectorRef) {}

  ngOnInit(): void {
    // 组件初始化时立即保存原始选项，避免依赖首次过滤事件
    this.originalOptions = [...this.dropdown.options];
  }

  @HostListener('onFilter', ['$event'])
  onFilter(event: any): void {
    if (!event.filter.trim()) {
      // 清空过滤条件时恢复全部原始选项
      this.dropdown.options = [...this.originalOptions];
      this.cd.markForCheck();
      return;
    }

    const filterValue = event.filter.toLocaleUpperCase('tr-TR');
    // 始终基于原始选项过滤，防止多次过滤后数据丢失
    const filtered = this.originalOptions.filter((option: any) => {
      const normalizedLabel = option.label.toLocaleUpperCase('tr-TR');
      return normalizedLabel.includes(filterValue);
    });

    this.dropdown.options = [...filtered];
    // 手动触发变更检测，确保界面同步更新过滤结果
    this.cd.markForCheck();
  }
}

关键修改说明 #

• 固定原始数据源：新增ngOnInit钩子在组件初始化时保存原始选项，后续过滤始终基于这个集合，避免多次过滤后选项被逐步截断的问题。
• 触发变更检测：每次修改dropdown.options后调用cd.markForCheck()，强制Angular检测组件状态变化，让界面同步更新过滤结果。
• 处理空过滤条件：当过滤框清空时，直接恢复全部原始选项，提升用户体验。
• 保留土耳其字符本地化转换：toLocaleUpperCase('tr-TR')确保土耳其语特有的字符转换正确（比如小写i转大写İ、小写ı转大写I），保证过滤匹配的准确性。

模板中的filterLocale="tr"可以保留，不过由于我们的指令已经手动处理了本地化转换，去掉也不会影响最终效果。

内容的提问来源于stack exchange，提问作者Enes Said Tatlı