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

我继续提供一个解决方案，接近您使用翻译服务提供给我的提示

               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 2

您可以使用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 3

添加

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

Answer 4

我在我的语言文件中使用此方法翻译下拉列表我跟踪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 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下拉菜单翻译选定的选项

5 个答案: