Refresh ionic select options

Ionic Framework
#1

Hello,
I have an ionic-select with some ionic-select-options that I add through an array that I create through a call to the server. So far everything ok, I can create the select in this way

<ion-select formControlName="exams" interface="action-sheet">

              <ion-select-option value="all">All</ion-select-option>

              <ion-select-option *ngFor="let e of exams" value="{{e.id}}">{{e.name}}</ion-select-option>

            </ion-select>

Now my question is, how do I refresh the options when I add a new element to the array?
If I do it this way
this.exams = getExams();

I can see the new information only by clicking on the select, but the new values ​​do not update immediately.
For example, if I delete the old array of exams and create one with new values, the old values ​​remain in the select until I click on the select.

#2

It’s pretty hard to help when we can’t see your code that fetches the data. Things that pop to mind:

  • You shouldn’t have to: if you’re binding the data, changing the data should change the markup automatically when Angular does its thing.
  • If nothing’s working, it’s possible that the markup IS changing, but the UI isn’t updating due to your call operating asynchronously outside of Angular.

Last thing I would try is wrapping the change to the array with NgZone, e.g.

import { NgZone } from '@angular/core';


constructor(
  public Zone: NgZone
) { }


getExams() {
    someApiCall.then(data => {
        this.Zone.run(() => {
            this.exams = data;
        });
    });
}
#3

Before trying @Daveshirman’s zone stuff, I would first manually trigger change detection. Historically, this has been an issue, especially with cascading selects.