[Ionic 5] [Angular] ion-select does not show the selected values

Don’t add await on my account - I am an await-hater.

What springs to mind here is the timing of how member is set. I personally tend to keep handles to all my FormControls so I don’t have to keep calling get on FormGroups, but somehow I would suggest getting a reference to that ageGroupId FormControl and calling setValue on it whenever member is modified (typically I would expect that to be either in an ngOnChanges handler or a subscription of some sort), instead of relying on whatever the state of member happens to be when initForm is called.

That is a good point but I don’t think it is the issue as the value in member is there when the form is initialized. Sorry should have included that bit.

ngOnInit() {
  this.authService.getMember(this.authService.member.id).then(async member => {
        // Get fresh member data
        if (member) {
          this.member = member;
        } else {
          // Use authService cached member data
          this.member = this.authService.member;
        }
        this.settingsService.getAgeGroups().then(ageGroups => {
          this.ageGroups = ageGroups;
          if (this.member.membershipPackage.code === 'adult') {
            // Remove 17 and under from Adult
            this.ageGroups.splice(this.ageGroups.findIndex(x => x.id === '1'), 1);
          }
          this.initForm();
        });
      }, err => {
        console.log(err);
      });
}

I don’t like the selected="false" on every ion-select-option because it just seems weird and impossible, but I don’t think it would have any effect. Another thing that probably isn’t it, but could conceivably cause problems, would be failing to initialize ageGroups to something like [] at the point of declaration. ngFor will spit the bit if it tries to iterate across undefined, and that first attempt happens way earlier than people think.

Yeah I saw your compiler tips above on that. Def going to try that.
You are correct in that I forgot to do this (= ) This code was written a while ago when I was still learning typescript and I won’t be doing that again.

In saying that I tested it with = and it makes no difference.
Also removing selected=“false” does nothing. Not sure why that is there ask 2018 me.

For now my changes have been applied to several pages and work for a fix. However it is not ideal.

1 Like

Is there any chance you can drop my fruit example code into your environment and see if it behaves like you would expect it to?

Sure. I will try in the next few hours.

With:
“noImplicitAny”: true,
“strictNullChecks”: true,
“strictPropertyInitialization”: true

That is a project for another day as I got hundreds of errors!

1 Like

I tried it. Can’t get it to select a value that is applied at the init of the form.
Either before or after your observable returns. Not sure why. Code is the same as for my list.

My code has only a single FormControl, not a whole FormGroup. I’m curious if that makes a difference. Is there an outside chance that you’re using something like OnPush change detection?

I put it inside my formgroup.
Not sure if I am using onPush, just default settings.

I just tried it in my Ionic 4 app and it does not have the issue with the same code, it shows the selected value.
So I consider this an Ionic 5 bug, that requires the work around to load the selection items before assigning the selected value.

1 Like

I have the same issue.
It’s logical to assume that the problem is with the ion-select element. The ion-select element is not refreshing the UI properly when the list dynamically comes after the form control already has a value. That’s why when putting *ngIf that makes sure the list comes first from the database, the ion-select value is shown correctly.
Today I installed the @ionic/angular 5.5.1 version but the fix is not yet there.
Let’s hope the amazing Ionic group will give us a solution soon.

Assuming they know about it.
Take a look here and log an issue if its not there:

This finally fixed my issue too. Thanks bro!