Angular 4 PrimeNG 下拉菜单翻译选定的选项

Question

在使用 ngx-translate 服务的 PrimeNG 组件的 Angular 4 应用程序中，我还想翻译下拉菜单的 selectedOption，而不仅仅是下拉菜单的选项。

进入我的组件我已经声明了选项和选择的选项

export class CronPickerComponent  {
   selectedOption: string = 'Jahr';
   options: SelectItem[];

   constructor( private translate: TranslateService ) {
       this.options = [];
       this.options.push({ label: 'Jahr', value: 'Jahr' });
       this.options.push({ label: 'Monat', value: 'Monat' });
       this.options.push({ label: 'Woche', value: 'Woche' });
       this.options.push({ label: 'Tag', value: 'Tag' });
       this.options.push({ label: 'Stunde', value: 'Stunde' });
       this.options.push({ label: 'Minute', value: 'Minute' });
    }

   computeExpressionFormat() {
           //  ...
     }

 }

并在相应的html中插入了相应的primeNG下拉列表

   <p-dropdown id="cronexpressionoptions" [options]="options" 
       [(ngModel)]="selectedOption"  [style]="{'width':'120px'}" 
       (onChange)="computeExpressionFormat()">
              <template let-option pTemplate="item">
                    <div  translate>{{option.label}}</div>
                </template>
   </p-dropdown>

问题是显示的选项已翻译，但下拉列表中的选定值未翻译。如下图所示，选项已翻译成英语，但所选值仍保留为德语（初始值）。

有没有办法翻译所选值或为所选值添加模板。同样在 primeNG dropdown 的 api 上，我没有看到为所选值添加模板的选项。

Answer 1

您可以使用 TranslateService 中的 stream() 或 get() 方法：

this.translate.stream('dropdownTranslations').subscribe(val => {
    this.options.push(
      {label: val.jahr, value: val.jahr},
      {label: val.monat, value: val.monat},
      ...
    );
});

stream() 当您需要更改翻译时可用，例如用户更改他的语言。

Answer 2

我继续使用接近于您通过使用翻译服务提供给我的提示的解决方案

               this.translate.onLangChange.subscribe(
                 () => {
                  this.options = [];
                  this.options.push({ label: this.translate.instant('Jahr'), 
                  value: 'Jahr' });
                  this.options.push({ label:  
                  this.translate.instant('Monat'), 
                  value: 'Monat' });

                 }
                );

因此，当翻译服务检测到语言更改时，会重新初始化下拉列表的选项，但不会丢失所有已准备就绪的选定值。标签在变化，但值保持不变。此外，所选选项将与更改后的标签一起显示。

Answer 3

我在我的语言文件中使用这种方法翻译下拉列表我跟踪 lang 和 dir 所以例如在我的 en.json 我得到：

"App": {
"lang": "en",
"dir": "ltr",
"direction": "right"
}

并且在视图中我将以这种方式使用它

<div dir="{{'App.dir' | translate}}">
   <select class="form-control" [formControl]="gender">
      <option *ngFor="let gender of genderList" [value]="gender.id">
          {{gender.name['App.lang' | translate]}}
      </option>
   </select>
</div>

对于下拉值，我选择将它们保留在翻译文件之外，因为我可能想从服务器请求中获取它们...它们的形状如此

const genderList = [
 {id: 1, name: {ar: 'ذكر', en: 'Male'}},
 {id: 2, name: {ar: 'أنثى', en: 'Female'}}
];

Answer 4

添加

<template let-option pTemplate="selectedItem">
    <div translate>{{option.label}}</div> 
</template>

Answer 5

我在这里遇到了同样的问题，实际上你可以通过为所选值创建一个模板来解决这个问题，这是一个例子：

<p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}">
     <ng-template let-item pTemplate="selectedItem">
        <img src="assets/showcase/images/demo/car/{{item.label}}.png" style="width:16px;vertical-align:middle" />
        <span style="vertical-align:middle">{{item.label}}</span>
    </ng-template>
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix" style="position: relative;height:25px;">
        <img src="assets/showcase/images/demo/car/{{car.label}}.png" style="width:24px;position:absolute;top:1px;left:5px"/>
        <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div> </div>
    </ng-template>
</p-dropdown>

我在这里找到它：https://www.primefaces.org/primeng/v9.1.7-lts/#/dropdown

Angular 4 PrimeNG 下拉菜单翻译选定的选项

Angular 4 PrimeNG dropdown translate selected option

angular

dropdown

primeng

ngx-translate