Ion-select values not refreshed

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:

Could you recreate this in some sort of plunkr example?

This will help debug the issue a bit further

Sure, here is the link:


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

Thank you.

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

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();

2 Likes

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

Thanks, it works perfectly

Hi,

What is the best and safest way to present a list of choices that refreshes periodically until a selection is made. Like the interface for connecting to a wifi.

For running at periodic interval I’m using Observable.interval(x).subscribe(...). It does run at specific interval and does get the data back but the array does not refresh even with detectChanges() and even with re-parsing the data and pushing into my array as suggested. Furthermore when it runs for a while, when I finally make a selection, the selection handler is not called and the select list re-appears.

I have the setup here if anyone wants to steer me closer to the light…

tx in advance