角度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() { 
      // ... 
    } 

} 

を宣言していると私は対応primeNGドロップダウンを挿入している、対応するHTML

<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> 

に問題は選択肢があるということです翻訳されて表示されますが、ドロップダウンの選択された値は翻訳されません。次の画像で見られるように、オプションは英語に翻訳されますが、選択された値はドイツ語（初期値）にとどまります。

選択した値を変換する方法や、選択した値のテンプレートを追加する方法はありますか。また、プライムNGのAPIにはdropdown私は選択した値のテンプレートを追加するオプションが表示されません。

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()が使用可能です。私はあなたが翻訳ときにサービスが言語の変更は、ドロップダウンメニューのオプションを再初期化検出しますが、すべての準備を失うことはない翻訳サービス

   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

選択された値。ラベルは変化していますが、値は変わりません。また、その変更されたラベルと共に、選択されたオプションが表示されます。

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

を、ビューで、私はこの方法でそれを使用します。

Answer 3

私は私が私が得た私のen.json、例えばので、LANGのトラックとdirを保つ私の言語ファイルでは、この方法を使用してドロップダウンを翻訳しますドロップダウン値について

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

012として形成されています