Ion-select reload same page, but selected option get lost


#1

I stumbled upon a strange problem. An ion-select with some ion-options calls a function, when something is selected and reloads the page (this.navCtrl.push(HomePage, {});). After the reload the selected option get lost for some reason.

...
<ion-select [(ngModel)]="modelName" (ionChange)="reloadPage('modelName')">
    <ion-option selected="true" *ngFor="let arr of this.someArray">
        {{arr.name}}
    </ion-option>
</ion-select>
...

All options are selected (for now). And after the reload nothing is selected, though i explicitly “told him” so. If i don’t use a ngModel it works, but of course i need the selected value. Is this an ionic-bug and is there a workaround for my problem ?


#2

I would suggest not changing the navigation stack from within a select’s change handler. There must be some other way to achieve what you’re trying to really do.


#3

i hope so ^^. My goal:

<ion-list *ngIf="this.someService.someParameter != null">
    .....
</ion-list>  

After the selection “this.someService.someParameter” isn’t null anymore and the list should be seen. It works now, but only with a navCtrl.push and with the problem i described.


#4

I have no idea whether either of these things will work, but two suggestions:

Lose the *sugar

I have had no end of grief with *ngIf and especially *ngFor, so try writing it out longhand:

<template [ngIf]="this.foo">
<ion-list></ion-list>
</template>

I know <template> is being deprecated in favor of <ng-template>, but not sure if the latter syntax is supported in the Angular version Ionic wants at the present.

Leave it in the DOM, but hidden

Instead of using ngIf to take the element completely out of the DOM, maybe leaving it in there will help:

<ion-list [hidden]="!this.foo">

P.S. It’s also probably worth taking a look at how the service is coded and especially how the relevant property is being updated.


#5

I just found a solution:

import { ViewChild  } from '@angular/core';
import { Content  } from 'ionic-angular';

export class TestPage {
    @ViewChild(Content) content: Content;

    update(){
        this.content.resize();
    }
}

Instead of navCtrl.push(samePage) the update function is called.

source:


#6

If you’re happy with that, I guess that’s really all that matters, but if I were in your shoes I would want to get at the root cause, which I suspect might be a faulty service that is somehow operating outside Angular’s change detection.


#7

Do you only care about firing the *ngIf in that ion-list? If that is all that matters, then inside your ion-select put

(ionChange)=ref.tick()

where you inject ref: ApplicationRef in your constructor. All you need is to connect Angular change detection to Ionic change detection, not to reload the whole page.


#8

IMHO triggering application-wide change detection here is overkill. If the problem here turns out to be similar to this one, then injecting a ChangeDetectorRef should be sufficient.


#9

Do you think (ionChange)="cdr.detectChanges()" would work too? I’ve never tried it, though maybe I should in my own code. I’m working inside onPush change detection, so I don’t know how much I’d personally save over ref.tick(). But probably the OP is using default change detection, so your idea is strictly better than mine there, at least if the code is almost as simple.


#10

It did for me and the OP in that other thread (well, having that call to detectChanges somewhere in the change handler did).


#11

I have a form with two ion-selects and I just tried this, and it works with the following caveat. I couldn’t do it with (ionChange)="cdr.detectChanges()" because I got a context error. But

(ionChange)="detectChanges()"

in the template, with

detectChanges() {
    this.cdr.detectChanges();
  }

in the ts file works fine. So thank you @rapropos. Unless this breaks my code for some bizarre reason, you just helped me improve performance on at least two pages.


#12

Damn. It works now without a navCtrl.push, this.content.resize(), or ChangeDetectorRef :confounded:

I just change “this.someService.someParameter” and the list is shown. I don’t get why it didn’t work before . Lost 4 hours :tired_face:


#13

Hi,
Can i know how you are staying on same page after reload. Actually i want to implement angular routing in ionic2 app where upon reload of page in web it should remain in same page instead going back to root page . Hope i could find a quick solution.
Thanks in advance


#14

For me,
on <ion-select (ionChange)=“getSelected()”;
this to reload page, value is persistant.