fix(virtual-list): empty list crashes

fixes #11093

Author: manucorporat

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

@@ -12,10 +12,6 @@ export class E2EPage {
   counter: number = 0;
 
   constructor(plt: Platform, public navCtrl: NavController) {
-    for (var i = 0; i < 200; i++) {
-      this.addItem();
-    }
-
     if (plt.is('ios')) {
       if (plt.testUserAgent('Safari')) {
         this.webview = ': iOS Safari';
@@ -29,6 +25,14 @@ export class E2EPage {
     }
   }
 
+  addItems() {
+    if (this.items.length === 0) {
+      for (var i = 0; i < 200; i++) {
+        this.addItem();
+      }
+    }
+  }
+
   headerFn(record: any, index: number, records: any[]) {
     if (index % 4 === 0) {
       return index + ' is divisible by 4';

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

@@ -32,6 +32,10 @@
 
   </ion-list>
 
+  <div padding>
+    <button ion-button (click)="addItems()">Add items</button>
+  </div>
+
   <div padding>
     <button ion-button (click)="pushPage()">Push Virtual Scroll Page</button>
   </div>

src/components/virtual-scroll/virtual-util.ts

@@ -317,40 +317,43 @@ export function updateDimensions(plt: Platform, nodes: VirtualNode[], cells: Vir
   data.topViewCell = totalCells;
   data.bottomViewCell = 0;
 
-  // completely realign position to ensure they're all accurately placed
-  cell = cells[0];
-  previousCell = {
-    row: 0,
-    width: 0,
-    height: 0,
-    top: cell.top,
-    left: 0,
-    tmpl: -1
-  };
-  for (var i = 0; i < totalCells; i++) {
-    cell = cells[i];
-
-    if (previousCell.left + previousCell.width + cell.width > data.viewWidth) {
-      // new row
-      cell.row++;
-      cell.top = (previousCell.top + previousCell.height);
-      cell.left = 0;
-
-    } else {
-      // same row
-      cell.row = previousCell.row;
-      cell.top = previousCell.top;
-      cell.left = (previousCell.left + previousCell.width);
-    }
+  if (totalCells > 0) {
+    // completely realign position to ensure they're all accurately placed
+    cell = cells[0];
+    previousCell = {
+      row: 0,
+      width: 0,
+      height: 0,
+      top: cell.top,
+      left: 0,
+      tmpl: -1
+    };
+
+    for (var i = 0; i < totalCells; i++) {
+      cell = cells[i];
 
-    // figure out which cells are viewable within the viewport
-    if (cell.top + cell.height > data.scrollTop && i < data.topViewCell) {
-      data.topViewCell = i;
+      if (previousCell.left + previousCell.width + cell.width > data.viewWidth) {
+        // new row
+        cell.row++;
+        cell.top = (previousCell.top + previousCell.height);
+        cell.left = 0;
+
+      } else {
+        // same row
+        cell.row = previousCell.row;
+        cell.top = previousCell.top;
+        cell.left = (previousCell.left + previousCell.width);
+      }
+
+      // figure out which cells are viewable within the viewport
+      if (cell.top + cell.height > data.scrollTop && i < data.topViewCell) {
+        data.topViewCell = i;
 
-    } else if (cell.top < viewableBottom && i > data.bottomViewCell) {
-      data.bottomViewCell = i;
+      } else if (cell.top < viewableBottom && i > data.bottomViewCell) {
+        data.bottomViewCell = i;
+      }
+      previousCell = cell;
     }
-    previousCell = cell;
   }
 
 }