fix(VirtualScroll): initialise differ with trackByFn (#11492)

* fix(VirtualScroll): initialise differ with trackByFn

* fix(VirtualScroll): DRY up differ initialization

Author: masimplo

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

@@ -58,6 +58,10 @@ export class E2EPage {
     window.location.reload(true);
   }
 
+  trackByFn(index: number, item: any) {
+    return item.value;
+  }
+
 }
 
 

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

@@ -19,15 +19,16 @@
     <button ion-button (click)="pushPage()">Push Virtual Scroll Page</button>
   </div>
 
-  <ion-list [virtualScroll]="items"
-            [headerFn]="headerFn">
+
+  <ion-list [virtualScroll]="items" [headerFn]="headerFn" [virtualTrackBy]="trackByFn"
+    approxItemHeight="46px">
 
     <ion-item-divider *virtualHeader="let header">
-      Header: {{header}}
+      Header: {{ header }}
     </ion-item-divider>
 
     <ion-item *virtualItem="let item">
-      Item: {{item.value}} {{item.someMethod()}}
+      Item: {{ item.value }} {{ item.someMethod() }}
     </ion-item>
 
   </ion-list>

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

@@ -234,6 +234,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
   };
   _queue: number = SCROLL_QUEUE_NO_CHANGES;
   _recordSize: number = 0;
+  _virtualTrackBy: TrackByFn;
 
   @ContentChild(VirtualItem) _itmTmp: VirtualItem;
   @ContentChild(VirtualHeader) _hdrTmp: VirtualHeader;
@@ -249,9 +250,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
   @Input()
   set virtualScroll(val: any) {
     this._records = val;
-    if (isBlank(this._differ) && isPresent(val)) {
-      this._differ = this._iterableDiffers.find(val).create(this.virtualTrackBy);
-    }
+    this._updateDiffer();
   }
 
   /**
@@ -368,7 +367,12 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
   /**
    * @input {function} Same as `ngForTrackBy` which can be used on `ngFor`.
    */
-  @Input() virtualTrackBy: TrackByFn;
+  @Input()
+  set virtualTrackBy(val: TrackByFn) {
+    if (!isPresent(val)) return;
+    this._virtualTrackBy = val;
+    this._updateDiffer();
+  };
 
 
   constructor(
@@ -481,6 +485,12 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
     return null;
   }
 
+  private _updateDiffer(): void {
+    if (isBlank(this._differ) && isPresent(this._records)) {
+      this._differ = this._iterableDiffers.find(this._records).create(this.virtualTrackBy);
+    }
+  }
+
   /**
    * @hidden
    * DOM WRITE
@@ -632,7 +642,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
       var stopAtHeight = (data.scrollTop + data.renderHeight);
 
       processRecords(stopAtHeight, records, cells,
-                      this._hdrFn, this._ftrFn, data);
+        this._hdrFn, this._ftrFn, data);
     }
 
     // ******** DOM READ ****************