fix(virtual-list): works with infinite-scroll

fixes #9350
fixes #9722
fixes #9247
fixes #10778

Author: manucorporat

src/components/img/img.ts

@@ -248,7 +248,7 @@ export class Img implements OnDestroy {
     const imgEle = this._img;
     const renderer = this._renderer;
 
-    if (imgEle.src !== srcAttr) {
+    if (imgEle && imgEle.src !== srcAttr) {
       renderer.setElementAttribute(this._img, 'src', srcAttr);
       renderer.setElementAttribute(this._img, 'alt', this.alt);
     }

src/components/loading/test/basic/app.module.ts

@@ -253,7 +253,6 @@ export class E2EPage {
   }
 
   presentLoadingOpenDismiss() {
-    // debugger;
     const loading = this.loadingCtrl.create({
       content: 'Loading 1'
     });

src/components/virtual-scroll/test/basic/app.module.ts

@@ -1,22 +1,20 @@
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, enableProdMode } from '@angular/core';
 import { IonicApp, IonicModule, NavController, Platform } from '../../../../../ionic-angular';
 
 
+enableProdMode();
+
 @Component({
   templateUrl: 'main.html'
 })
 export class E2EPage {
   items: any[] = [];
   webview: string = '';
+  counter: number = 0;
 
   constructor(plt: Platform, public navCtrl: NavController) {
     for (var i = 0; i < 200; i++) {
-      this.items.push({
-        value: i,
-        someMethod: function() {
-          return '!!';
-        }
-      });
+      this.addItem();
     }
 
     if (plt.is('ios')) {
@@ -43,6 +41,16 @@ export class E2EPage {
     this.navCtrl.push(E2EPage);
   }
 
+  addItem() {
+    this.items.push({
+      value: this.counter,
+      someMethod: function() {
+        return '!!';
+      }
+    });
+    this.counter++;
+  }
+
   reload() {
     window.location.reload(true);
   }

src/components/virtual-scroll/test/basic/main.html

@@ -5,6 +5,9 @@
       <button ion-button (click)="reload()">
         Reload
       </button>
+      <button ion-button icon-only (click)="addItem()">
+        <ion-icon name="add"></ion-icon>
+      </button>
     </ion-buttons>
   </ion-navbar>
 </ion-header>

src/components/virtual-scroll/test/infinite-scroll/app.module.ts

@@ -0,0 +1,82 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../../../ionic-angular';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  counter = 1;
+  items: any[] = [];
+  enabled = true;
+
+  constructor() {
+    for (let i = 0; i < 100; i++) {
+      this.addItem();
+    }
+  }
+
+  addItem() {
+    this.items.push(this.counter);
+    this.counter++;
+  }
+
+  doInfinite(): Promise<any> {
+    console.log('Begin async operation');
+
+    return getAsyncData().then(newData => {
+      for (var i = 0; i < newData.length; i++) {
+        this.items.push( this.items.length );
+      }
+
+      console.log('Finished receiving data, async operation complete');
+
+      if (this.items.length > 900) {
+        this.enabled = false;
+      }
+    });
+  }
+
+}
+
+function getAsyncData(): Promise<any[]> {
+  // async return mock data
+  return new Promise(resolve => {
+
+    setTimeout(() => {
+      let data: number[] = [];
+      for (var i = 0; i < 30; i++) {
+        data.push(i);
+      }
+
+      resolve(data);
+    }, 500);
+
+  });
+}
+
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}

src/components/virtual-scroll/test/infinite-scroll/main.html

@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>Virtual Scroll</ion-title>
+
+    <ion-buttons end>
+      <button ion-button icon-only (click)="addItem()">
+        <ion-icon name="add"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-navbar>
+</ion-header>
+
+
+<ion-content padding>
+
+  <ion-list [virtualScroll]="items">
+
+    <ion-item *virtualItem="let item">
+      Item: {{item}}
+    </ion-item>
+
+  </ion-list>
+
+  <ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())" [enabled]="enabled" threshold="100px">
+    <ion-infinite-scroll-content
+      loadingSpinner="bubbles"
+      loadingText="Loading more data...">
+    </ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+
+</ion-content>
+