fix(virtual-scroll): re-render rows with proper height when replacing…

… the data set closes #878
Teradata · Oct 1, 2017 · 3257e75 · 3257e75
1 parent 556a42c
commit 3257e75
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/src/platform/core/virtual-scroll/virtual-scroll-container.component.spec.ts b/src/platform/core/virtual-scroll/virtual-scroll-container.component.spec.ts
@@ -77,6 +77,36 @@ describe('Component: VirtualScrollContainer', () => {
       });
     });
   });
+
+  it('should render rows, clear them and render them again', (done: DoneFn) => {
+    let fixture: ComponentFixture<any> = TestBed.createComponent(TestBasicVirtualScrollComponent);
+    let component: TestBasicVirtualScrollComponent = fixture.debugElement.componentInstance;
+    let virtualScrollComponent: DebugElement = fixture.debugElement.query(By.directive(TdVirtualScrollContainerComponent));
+
+    component.height = 100;
+    let data: any[] = component.data;
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        expect(virtualScrollComponent.componentInstance.fromRow).toBe(0);
+        expect(virtualScrollComponent.componentInstance.virtualData.length).toBe(6);
+        component.data = [];
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(virtualScrollComponent.componentInstance.fromRow).toBe(0);
+          expect(virtualScrollComponent.componentInstance.virtualData.length).toBe(0);
+          component.data = data;
+          fixture.detectChanges();
+          fixture.whenStable().then(() => {
+            expect(virtualScrollComponent.componentInstance.fromRow).toBe(0);
+            expect(virtualScrollComponent.componentInstance.virtualData.length).toBe(6);
+            done();
+          });
+        });
+      });
+    });
+  });
 });
 
 @Component({

diff --git a/src/platform/core/virtual-scroll/virtual-scroll-container.component.ts b/src/platform/core/virtual-scroll/virtual-scroll-container.component.ts
@@ -1,6 +1,6 @@
 import { Component, Directive, Input, Output, EventEmitter, ContentChild, AfterViewInit, ViewChild,
          ChangeDetectionStrategy, ChangeDetectorRef, QueryList, ViewChildren, ElementRef, HostListener,
-         Renderer2, AfterViewChecked } from '@angular/core';
+         Renderer2, AfterViewChecked, OnDestroy } from '@angular/core';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 
 import { Subscription } from 'rxjs/Subscription';
@@ -15,8 +15,9 @@ const TD_VIRTUAL_OFFSET: number = 2;
   templateUrl: './virtual-scroll-container.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterViewChecked {
+export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterViewChecked, OnDestroy {
 
+  private _rowChangeSubs: Subscription;
   private _initialized: boolean = false;
 
   private _totalHeight: number = 0;
@@ -83,8 +84,7 @@ export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterVi
               private _changeDetectorRef: ChangeDetectorRef) {}
 
   ngAfterViewInit(): void {
-    let subs: Subscription = this._rows.changes.subscribe(() => {
-      subs.unsubscribe();
+    this._rowChangeSubs = this._rows.changes.subscribe(() => {
       this._calculateVirtualRows();
     });
     this._initialized = true;
@@ -101,6 +101,12 @@ export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterVi
     }
   }
 
+  ngOnDestroy(): void {
+    if (this._rowChangeSubs) {
+      this._rowChangeSubs.unsubscribe();
+    }
+  }
+
   /**
    * trackBy?: TrackByFunction
    * This accepts the same trackBy function [ngFor] does.