ionic-team / ionic-v3

The repo for Ionic 3.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
128 stars 85 forks source link

Ion-Select does not trigger ng2-translate pipe when changing language after selection (With a bonus GIF example!) #2

Open ionitron-bot[bot] opened 5 years ago

ionitron-bot[bot] commented 5 years ago

Ionic version: (check one with "x") [ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x] 3.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: A picture is worth a thousand words, a gif is worth more: http://g.recordit.co/p7l0KyysW0.gif

But here's a summary: Using ion-select, when first selecting a value, then changing the language, the selectedValue requires a click on the ion-select component for the value to update in the background.

What can I do to make it update without having to manually set the selectedValue?

This is the template:

<ion-item>
     <ion-label>{{ inputArray['ethnicity_id'].label | translate }}</ion-label>
     <ion-select type="text" formControlName="ethnicity_id" (blur)="onInputChange(inputArray['ethnicity_id'])">
            <ion-option *ngFor="let ethnicity of local.ethnicities" [value]="ethnicity.id">{{ ethnicity.name | translate }}</ion-option>
     </ion-select>
</ion-item>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 6.5.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.8
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : none
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v6.9.1
    OS         : OS X El Capitan
    Xcode      : Xcode 8.2.1 Build version 8C1002
    ios-deploy : 1.9.1
    ios-sim    : 5.0.13
    npm        : 4.1.2
FloryanFilip commented 5 years ago

So, anyone able to make it work with inside and ngFor? Sample code below: `<ion-select ngIf="showFontSizes" formControlName="font_size" interface="popover" [ngStyle]="{'font-size': font_size}"> <ion-option *ngFor="let fontsize of fontSizes" [value]="fontsize.size">{{ fontsize.label | translate }} `