1

在使用 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下拉列表的 api 上，我没有看到为所选值添加模板的选项。

在此处输入图像描述

4

5 回答 5

4

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

               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' });

                 }
                );

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

于 2017-10-03T08:22:48.767 回答
2

添加

<template let-option pTemplate="selectedItem">
    <div translate>{{option.label}}</div> 
</template>
于 2018-03-15T09:37:41.850 回答
1

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

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

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

于 2017-10-02T13:09:14.857 回答
0

我在我的语言文件中使用这种方法翻译下拉列表，我跟踪 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'}}
];
于 2017-10-21T01:12:24.603 回答
0

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

<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

于 2020-10-17T19:34:07.367 回答