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.
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 ?
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.
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.
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.
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.
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.
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.
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.
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.
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