Ion-select values not refreshed

#1

Hello,

I want to update the values of a ion-select when the user enters a value in a ion-searchbar and press enter. The ion-select values are correctly updated and I can see them on a console.log, but if I use the open() method of the ion-select (this.select.open() in my code below), the select window is empty (no values are displayed).
Do you have any idea?
Thank you.

The HTML file:

<ion-content padding>
	<ion-searchbar [(ngModel)]="searchText" (change)="searchPlace()" [showCancelButton]="true" (ionCancel)="onCancel($event)" (ionClear)="onClear($event)"></ion-searchbar>
	<ion-label ng-if="selectedPlace.length > 0">{{ selectedPlace }}</ion-label>
	
	<ion-item>
		<ion-label>Place</ion-label>
		<ion-select #select [(ngModel)]="selectedPlace" (ionChange)="selectPlace()">
			<ion-option *ngFor="let place of places" value="{{ place }}">{{ place }}</ion-option>
		</ion-select>
	</ion-item>
</ion-content>

The TS file:

import { Component, ViewChild } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { Select } from ‘ionic-angular’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’,
queries: {
select: new ViewChild(‘select’)
}
})
export class HomePage {
@ViewChild(‘select’) select: Select;
items;
places: string = ;
selectedPlace: string = “”;
searchText: string = “”;

constructor(public navCtrl: NavController) {
    this.initializeItems();
}

initializeItems() {
    this.items = [
        'Amsterdam',
        'Bogota',
        'Buenos Aires',
        'Cairo',
        'Dhaka',
        'Edinburgh',
        'Geneva',
        'Genoa',
        'Glasglow',
        'Hanoi',
        'Hong Kong',
        'Islamabad',
        'Istanbul',
        'Jakarta',
        'Kiel',
        'Kyoto',
        'Le Havre',
        'Lebanon',
        'Lhasa',
        'Lima',
        'London',
        'Los Angeles',
        'Madrid',
        'Manila',
        'New York',
        'Olympia',
        'Oslo',
        'Panama City',
        'Peking',
        'Philadelphia',
        'San Francisco',
        'Seoul',
        'Taipeh',
        'Tel Aviv',
        'Tokio',
        'Uelzen',
        'Washington'
    ];
}
onCancel(event) {
    this.resetSearchPlaces();
    console.log("onCancel");
}
onClear(event) {
    this.resetSearchPlaces();
    console.log("onClear");
}
resetSearchPlaces() {
    this.places = [];
}
searchPlace() {
    console.log(this.searchText);
    // set val to the value of the ev target
    let val = this.searchText;
    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
        this.places = this.items.filter((item) => {
            return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
        })
        if (this.places.length > 0) {
            console.log(this.places);
            this.select.open();
        }
    }
}

selectPlace() {
    console.log("selectPlace");
    this.searchText = "";
}

}

Screenshot:

ngIf not working on first load
Ion-select reload same page, but selected option get lost
Ion-option pre-selection not working
Form Not Resetting Correctly
#2

Could you recreate this in some sort of plunkr example?

This will help debug the issue a bit further

#3

Sure, here is the link:


I updated app/home.page.ts and app/home.page.html

Thank you.

#4

This looks thorny. If you don’t get any better answers, try injecting a ChangeDetectorRef in your constructor and call its detectChanges() method right before you open the select.

2 Likes
#5

Thanks for the help, ChangeDetectorRef works :slight_smile:

What I did:
//Add the import
import { ChangeDetectorRef } from ‘@angular/core’;

//Add ChangeDetectorRef in constructor
constructor(public navCtrl: NavController, public cdr: ChangeDetectorRef) {

//Call detectChanges just before open()
this.cdr.detectChanges();
this.select.open();

#6

Thank you so much for posting your solution… I ran into the same issue and having it so well detailed really helped me.