Virtual-scroll not updating when initialized with empty data

Bug Report

Ionic version:

[x] 4.1.1

Current behavior: Isssue is similar to #11532 On first user connect I download a collection of items from a database, I created an observable that next each item once response is given by database and push it to the data array. If I use a simple *ngFor, when the list is updated by the subscriber, item is drawn immediately. With virtual-scroll, it works if the data array is given already with some element, but not if it is empty. I use tabs to change the data given to the virtual-scroll, If I switch data using those tabs, the virtual scroll do update.

Expected behavior:

Virtual-scroll should refresh when items are added by the subscriber.

Steps to reproduce:

1. In new application, create a virtual scroll in the home page binded to a list of items which is empty at first
2. Asynchronously fill the data array without user interaction

Related code: Isssue is similar to #11532

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.2 (C:\Users\rmazu\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.1.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.3.5
   @angular/cli                  : 7.3.5
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic 5.3.0, cordova-plugin-ionic-keyboard 2.1.3, cordova-
plugin-ionic-webview 3.1.2, (and 7 other plugins)


System:

   Android SDK Tools : 26.1.1 (C:\DEV\AndroidSDK)
   NodeJS            : v10.15.0 (C:\DEV\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

[liamdebeasi]

It depends on the Angular change detection strategy you’re using. By default they are different, but are similar when using the OnPush strategy in Angular.

[liamdebeasi]

Hi there,

Thanks for the follow up. For performance reasons, Stencil (the web component compiler that Ionic uses) only compares references for running change detection, not the data inside of arrays or objects.

This means that the standard mutable array operations such as this.viewList.push(Math.random()); will not trigger change detection.

In your scenario, you will want to do something like:

  this.viewList = [
    ...this.viewList,
    Math.random()
  ]

The ... is the Spread operator which “expands” the given object in place: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Alternatively, you might want to consider doing this all at once after the loop has completed:

let tempArray  = [];
for (let i = 0; i < 30; i++) {
  tempArray.push(Math.random());
}

this.viewList = this.viewList.concat(tempArray);

You can learn more about how Stencil handles change detection here: https://stenciljs.com/docs/reactive-data

I am going to close this, but for further questions feel free to post on our forum or our slack.

Thanks!