Translation inside select options

Ionic Framework ionic-v3
21

Hi,

I’m experimenting the same weird issue. Did you fix your problem?

Thanks

22

I’m using a little workaround to solve this problem. We need to reinitialize the ion-select element. I added a 1ms timeout to do this, without timeout it wont work.

<ion-select *ngIf="showSelects" [(ngModel)]="settings.interval" interface="popover" (ionChange)="save()">

this.showSelects = false;
window.setTimeout(() => {
    this.showSelects = true;
}, 1);

Hope this helps.

2 Likes
23

I was having the same issue, based on your post I did something similar, just that I put

  ionViewDidEnter() {
    this.showSelects = true; //Workaround so the selected value on selects shows translated
  }
24

ionic -v: 3.19.0
npm -v: 5.6.0
cordova -v: 7.1.0
package.json => ionic-angular => 3.9.2

Also (still) experiencing the same problem.
Translations within ‘select option label’ in a ngFor aren’t updated with the translate pipe.
Yes the *ngIf workaround is helping, but obviously it shouldn’t be like that?!

Anyone any updates on this?

    <ion-item>
      <ion-label>{{'settings.language' | translate}}</ion-label>
      <ion-select (ionChange)="setLang($event)" [(ngModel)]="selectedLang" interface="popover" [placeholder]="'settings.language' | translate">
        <ion-option *ngFor='let lang of availableLangs' [value]="lang.name">
          {{'settings.languages.' + lang.name | translate}}
        </ion-option>
      </ion-select>
    </ion-item>