NativeScript ListView isn't updating

Question

So I have a ListView like this

     <ListView height="150" [items]="countries">
            <ng-template let-country="item">
                <Image src={{country.imgSrc}}></Image>
                <Label text={{country.name}}></Label>
            </ng-template>
     </ListView>

I have a subscription to an Observable that is returning an array of countries.

countries: any[] = [];

ngOnInit() {
   this.countryService.countriesUpdated.subscribe(
      (countries:any[]) => {
           this.countries = countries;
       {
   )
}

When countries is updated. The ListView doesn't update the screen with a new ListItem. If instead I initialize countries with a value, it does display the ListItem. I placed a button on the screen with a tap listener, that console.log(this.countries). After the tap, the new ListItem finally appears. Shouldn't the binding of countries to the ListView automatically update?

NativeScript 6.0 Android 10

If it works on tap, then I guess the change detection didn't work properly at earlier point. Can you share a minimal Playground sample where the issue can be reproduced. — Manoj

iamcootis iamcootis · Accepted Answer · 2020-01-25T00:22:26

I added private zone NgZone to my constructor, and then wrapped the subscription response like this:

this.zone.run(()=>{
   me.countries= countries;
});

Source: https://discourse.nativescript.org/t/listview-does-not-refresh-update-when-a-new-value-is-added/1492

NativeScript ListView isn't updating

3 Answers