首页 文章

Angular 4 PrimeNG下拉列表转换选定的选项

提问于
浏览 次
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 dropdown的api上，我没有看到为所选值添加模板的选项 .

enter image description here

angular dropdown primeng ngx-translate

4 回答

  • 0

    加

    <template let-option pTemplate="selectedItem">
    <div translate>{{option.label}}</div> 
</template>
    回复于
  • 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' });

                 }
                );

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

    回复于
  • 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() 可用 .

    回复于
  • 1

    我在我的语言文件中使用此方法翻译下拉列表我跟踪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'}}
];
    回复于

相关问题