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

Ionic Framework Ionic Angular
#21

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.

#22

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);
      });
}
#23

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.

#24

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

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?

#26

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

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.

#28

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?

#29

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

#30

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

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.

#32

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

#33

This finally fixed my issue too. Thanks bro!