PrimeNG 下拉菜单过滤多语言选项

Question

我们将 Angular v16 与 PrimeNG 16 和 NGX-Translate v15 结合使用。翻译工作正常，但是过滤有问题。标签通常采用代码表代码，例如“some.resource.key”。

过滤正在寻找

"some.resource.key"

而不是

"some.resource.key" | translate

<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="item">
      {{ item.label | translate }}
  </ng-template>
</p-dropdown>

有什么办法可以解决这个问题吗？我已经尝试手动翻译并使用已翻译的标签设置选项，但是样板代码太多，并且每个组件中需要处理很多情况。我正在寻找更好的解决方案。

谢谢！

Answer 1

你的代码工作得很好，我认为翻译键设置不正确，这可能是问题所在

我为所选项目添加了翻译模板，执行此操作后一切正常！

下面是工作示例和 stackblitz！

完整代码

html

<div>
  <h2>{{ 'HOME.TITLE' | translate }}</h2>
  <label>
    {{ home | translate }}
    <select #langSelect (change)="translate.use(langSelect.value)">
      <option
        *ngFor="let lang of translate.getLangs()"
        [value]="lang"
        [selected]="lang === translate.currentLang"
      >
        {{ lang }}
      </option>
    </select>
  </label>
</div>

<hr />

<div class="card flex justify-content-center">
  <p-dropdown
    [options]="cities"
    [(ngModel)]="selectedCity"
    optionLabel="name"
    [showClear]="true"
    placeholder="Select a City"
  >
    <ng-template pTemplate="selectedItem" let-selectedOption>
      {{selectedOption.translateKey | translate}}
    </ng-template>
    <ng-template let-item pTemplate="item">
      {{item.translateKey | translate}}
    </ng-template>
  </p-dropdown>
</div>

TS

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

interface City {
  name: string;
  code: string;
  translateKey: string;
}
@Component({
  selector: 'dropdown-basic-demo',
  templateUrl: './dropdown-basic-demo.html',
})
export class DropdownBasicDemo implements OnInit {
  constructor(public translate: TranslateService) {
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang('en');

    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  }
  cities: City[] | undefined;

  selectedCity: City | undefined;
  home = 'HOME.SELECT';

  ngOnInit() {
    this.cities = [
      { name: 'New York', code: 'NY', translateKey: 'HOME.DROPDOWN.NEW_YORK' },
      { name: 'Rome', code: 'RM', translateKey: 'HOME.DROPDOWN.ROME' },
    ];
  }
}

Stackblitz 演示