[Ionic 4] Ion-select-option underlying List not updating

I have two drop downs. Both using ion-select-option to show the list.
HTML Part:

<form [formGroup]="sampleFormGroup">
      
        <ion-row class="form-group">
            <ion-col>
                listToBeUpdated:
            </ion-col>
            <ion-col>
              <ion-select class="form-control myCustomSelect" formControlName="listToBeUpdated" *ngIf="sampleList">
                <ion-select-option *ngFor="let sampleListItem of sampleList" [value]="sampleListItem">{{sampleListItem}}</ion-select-option>
              </ion-select>
            </ion-col>
          </ion-row>


          <ion-row class="form-group">
              <ion-col>
                  listOnWhichItDepends:
              </ion-col>
              <ion-col>
                <ion-select interface="popover" class="form-control myCustomSelect" formControlName="listOnWhichItDepends">
                  <ion-select-option *ngFor="let dummyListItem of dummyList" [value]="dummyListItem">{{dummyListItem}}</ion-select-option>
                </ion-select>
              </ion-col>
            </ion-row>

    </form>

Component Part:

sampleFormGroup: FormGroup;
  sampleList: Array<number>;
  dummyList: Array<number>;
  constructor(private navCtrl: NavController, private fb: FormBuilder) {}
  ngOnInit() {
    this.sampleList = new Array<number>();
    this.dummyList = new Array<number>(10, 20, 30, 40);
    for(let i = 0 ; i < 10 ; i++){
      this.sampleList.push(i);
    }
    
    this.sampleFormGroup = this.fb.group({
      listToBeUpdated: [this.sampleList[0], [Validators.required]],
      listOnWhichItDepends: [this.dummyList[0], [Validators.required]]
    });
    this.formControlUpdated();
  }

formControlUpdated() {
    this.sampleFormGroup.controls['listOnWhichItDepends'].valueChanges.subscribe(listOnWhichItDependsUpdated => {
      this.sampleList = new Array<number>();
      for (let i = 0 ; i < listOnWhichItDependsUpdated ; i++) {
        this.sampleList.push(i);
      }
      this.setListToBeUpdated = this.sampleList;
    });
  }

Expected Behavior: if “listOnWhichItDepends” changes the list shown on UI “listToBeUpdated” should be updated.

Encountered Behavior with Ionic 4 : Selected “listOnWhichItDepends” to be 10. The “sampleList” should show only 10 on the UI as list. But it now showing the previous list and not updating when the array updates.

On Ionic 3 (ion-options) it is working fine. But giving issue when ion-select-option is used.
Please have a look into this issue.
Thanks in Advance.

Hi, any solution?
I have the same problem.

Any chance this is related?

1 Like

Nope, I have this problem in ionic 4.
I also have another application with ionic 3 and this thing is working there.
Now I using an ngIf and hiding the whole thing for a moment and than displaying again.
Then it’s working.

I don’t believe this matters.

I suspect that in that other application you are doing something else that has a side-effect of triggering change detection, such as:

If you’re happy with that, I guess there’s not much else I can say that will matter.

I’m really not happy, but for now this is the only solution.
This is my code.
I have an alowed langs list. And than I can choose my native lang.
But after in the next list I need to exclude the selected native language.
The filtering working correctly if I select my native language, than when I’m console logging out my targetList, it’s correct.
Only when I’m oppening the next select where I’m using ngFor on targetList, I still have the native language in that list.

onChange(event, which) {
        this.showSelect = false
        setTimeout(() => this.showSelect = true, 50)
        if (which == 'native') {
            this.targetList = this.allowedLangs.filter((item) => item != this.nativeLang)
        } else {
            this.nativeList = this.allowedLangs.filter((item) => _.indexOf(this.targetLangs, item) === -1)
        }
        this.enableButton = this.nativeLang && this.targetLangs.length
    }

What happened when you injected the ChangeDetectorRef and called its detectChanges() method as illustrated in my previously referenced post?

Unfortunatelly nothing.
For now I’m going to use this way, because this logic only appears in 2 places.
So in this case it’s not a big deal but still annoying. :smile:
Anyways thank you for your help. :slight_smile: