Ion-list with dynamic ion-item

Ionic Framework ionic-v3
1

I have a list as described in code snippet below

<ion-searchbar [(ngModel)]="searchQuery" id="place_search" (input)="getItems($event)"placeholder=“Type in your current location”>

<ion-list> <ion-item *ngFor="#item of items" (click)="insertSelectLocationItem()"> {{ item }} </ion-item> </ion-list>

A searchbar that trigger an api call. The results from the call will set the items. I’m not able to figure out how to reload the list after the items have been updated. If i click on the list in UI, the list gets refreshed and the latest items are shown.

Any help would be appreciated.

Thanks

2

Hi jainvinit,

i have the exact same Problem. Did you find a good solution ?

Thank you

3

Try updating the items inside an ngZone, this will trigger a digest loop and will make the UI pickup the changes.

import { NgZone } from ‘@angular/core’;

In the constructor:
constructor(private zone: NgZone)

Inside getItems handler

this.zone.run(()=>{
//Update the items here
});

Hope this helps!

1 Like
4

I try to avoid using zone as much as possible. Check out this example (https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/). I’ve used it to implement a search of a list that will update when the items change as you want.