Angular+PrimeNG下拉框多语言过滤问题求助

我们使用Angular v16、PrimeNG 16和NGX-Translate v15，翻译功能正常，但PrimeNG下拉框的过滤存在问题：选项标签使用资源键（如codetable.item1），通过translate管道渲染为对应语言的文本（英文sweet、法文doux），但过滤时只会匹配资源键本身，完全无法根据翻译后的文本筛选。

当前使用的下拉框代码如下：

<p-dropdown
  [options]="options"
  [(ngModel)]="selectedValue"
  [filter]="true"
  [showClear]="true"
>
  <ng-template let-item pTemplate="item">
      {{ item.label | translate }}
  </ng-template>
  <ng-template let-item pTemplate="selectedItem">
      {{ item.label | translate }}
  </ng-template>
</p-dropdown>

曾尝试手动提前翻译所有选项并替换标签，但每个组件都要重复处理，代码冗余严重，因此寻求更优方案。

补充说明 #

资源键与翻译后的文本无共同字符，例如：

• 资源键：codetable.item1、codetable.item2
• 英文翻译：codetable.item1: "sweet"
• 法文翻译：codetable.item1: "doux"

解决方案一：自定义过滤函数 #

利用PrimeNG的filterFunction属性，结合NGX-Translate的TranslateService，让过滤逻辑匹配翻译后的文本：

1. 在组件中注入TranslateService，并定义自定义过滤函数：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  options = [
    { label: 'codetable.item1', value: '1' },
    { label: 'codetable.item2', value: '2' }
  ];
  selectedValue: any;

  constructor(private translateService: TranslateService) {}

  // 自定义过滤函数，匹配翻译后的文本
  customFilter(filterValue: string, item: any): boolean {
    const translatedLabel = this.translateService.instant(item.label);
    return translatedLabel.toLowerCase().includes(filterValue.toLowerCase());
  }
}

2. 在模板中绑定filterFunction：

<p-dropdown
  [options]="options"
  [(ngModel)]="selectedValue"
  [filter]="true"
  [showClear]="true"
  [filterFunction]="customFilter"
>
  <ng-template let-item pTemplate="item">
      {{ item.label | translate }}
  </ng-template>
  <ng-template let-item pTemplate="selectedItem">
      {{ item.label | translate }}
  </ng-template>
</p-dropdown>

解决方案二：封装通用翻译下拉框组件 #

如果多个组件都需要这类下拉框，可以封装一个通用组件，统一处理翻译和过滤逻辑，避免重复代码：

1. 创建通用组件TranslatedDropdownComponent：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-translated-dropdown',
  template: `
    <p-dropdown
      [options]="options"
      [(ngModel)]="selectedValue"
      [filter]="true"
      [showClear]="true"
      [filterFunction]="customFilter"
      (onChange)="onSelectionChange.emit($event)"
    >
      <ng-template let-item pTemplate="item">
          {{ item.label | translate }}
      </ng-template>
      <ng-template let-item pTemplate="selectedItem">
          {{ item.label | translate }}
      </ng-template>
    </p-dropdown>
  `
})
export class TranslatedDropdownComponent {
  @Input() options: any[] = [];
  @Input() selectedValue: any;
  @Output() selectedValueChange = new EventEmitter<any>();
  @Output() onSelectionChange = new EventEmitter<any>();

  constructor(private translateService: TranslateService) {}

  customFilter(filterValue: string, item: any): boolean {
    const translatedLabel = this.translateService.instant(item.label);
    return translatedLabel.toLowerCase().includes(filterValue.toLowerCase());
  }
}

2. 在其他组件中直接使用：

<app-translated-dropdown
  [options]="options"
  [(ngModel)]="selectedValue"
></app-translated-dropdown>

注意事项 #

• 确保TranslateService已加载对应语言包，若语言包是异步加载的，可监听translate.onLangChange事件，在语言切换时重新触发过滤逻辑；
• 若选项是动态加载的，需保证语言切换时选项的翻译状态同步更新，避免过滤失效。

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