Ion-select values not refreshed

Ionic Framework ionic-v3
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:

image
image800×522 97.4 KB

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

3 Likes
6

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

7

Thanks, it works perfectly

8

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