fix(scrolling): virtual list not updating when source array is mutated

When an array is passed to `cdkVirtualFor`, it falls back to creating an `ArrayDataSource` which won't emit if the array has changed. Since the intention of the `cdkVirtualFor` is to be (more or less) a drop-in alternative for `ngFor`, it is expected that it'll update if the data has changed. These changes add a new type of data source that will allow us to detect changes on the data and to update the view.

Fixes #14635.
Fixes #14501.

Author: crisbeto

src/cdk/collections/array-data-source.ts

@@ -10,7 +10,7 @@ import {Observable, isObservable, of as observableOf} from 'rxjs';
 import {DataSource} from './data-source';
 
 
-/** DataSource wrapper for a native array. */
+/** DataSource wrapper for a static native array. */
 export class ArrayDataSource<T> extends DataSource<T> {
   constructor(private _data: T[] | ReadonlyArray<T> | Observable<T[] | ReadonlyArray<T>>) {
     super();

src/cdk/collections/differ-data-source.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {DataSource} from './data-source';
+import {IterableDiffer, IterableDiffers, TrackByFunction} from '@angular/core';
+import {Subject, Observable} from 'rxjs';
+
+/** DataSource wrapper for an iterable whose value might change. Emits when changes are detected. */
+export class DifferDataSource<T> extends DataSource<T> {
+  private _differ: IterableDiffer<T>;
+  private _changes = new Subject<T[]>();
+
+  constructor(
+    private _differs: IterableDiffers,
+    private _iterable: T[],
+    trackBy?: TrackByFunction<T>) {
+
+    super();
+    this._differ = _differs.find(_iterable).create(trackBy);
+  }
+
+  connect(): Observable<T[] | ReadonlyArray<T>> {
+    return this._changes.asObservable();
+  }
+
+  disconnect() {
+    this._changes.complete();
+  }
+
+  /** Checks the array for changes. */
+  doCheck() {
+    if (this._differ.diff(this._iterable)) {
+      this._changes.next(this._iterable);
+    }
+  }
+
+  /** Switches the `trackBy` function of the data source. */
+  switchTrackBy(trackBy?: TrackByFunction<T>) {
+    this._differ = this._differs.find(this._iterable).create(trackBy);
+    this.doCheck();
+  }
+}

src/cdk/collections/public-api.ts

@@ -7,6 +7,7 @@
  */
 
 export * from './array-data-source';
+export * from './differ-data-source';
 export * from './collection-viewer';
 export * from './data-source';
 export * from './selection-model';

src/cdk/scrolling/virtual-for-of.ts

@@ -12,6 +12,7 @@ import {
   DataSource,
   ListRange,
   isDataSource,
+  DifferDataSource,
 } from '@angular/cdk/collections';
 import {
   Directive,
@@ -30,7 +31,7 @@ import {
   TrackByFunction,
   ViewContainerRef,
 } from '@angular/core';
-import {Observable, Subject, of as observableOf, isObservable} from 'rxjs';
+import {Observable, Subject, of as observableOf} from 'rxjs';
 import {pairwise, shareReplay, startWith, switchMap, takeUntil} from 'rxjs/operators';
 import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 
@@ -81,20 +82,32 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
   /** Subject that emits when a new DataSource instance is given. */
   private _dataSourceChanges = new Subject<DataSource<T>>();
 
+  /**
+   * Current differ data source. Needs to be kept in a separate
+   * property so we can run change detection on it.
+   */
+  private _differDataSource: DifferDataSource<T> | null = null;
+
   /** The DataSource to display. */
   @Input()
   get cdkVirtualForOf(): DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined {
     return this._cdkVirtualForOf;
   }
   set cdkVirtualForOf(value: DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined) {
     this._cdkVirtualForOf = value;
+
+    let dataSource: DataSource<T>;
+
     if (isDataSource(value)) {
-      this._dataSourceChanges.next(value);
+      dataSource = value;
+    } else if (Array.isArray(value)) {
+      this._differDataSource = dataSource =
+          new DifferDataSource(this._differs, value, this.cdkVirtualForTrackBy);
     } else {
-      // Slice the value if its an NgIterable to ensure we're working with an array.
-      this._dataSourceChanges.next(new ArrayDataSource<T>(
-          isObservable(value) ? value : Array.prototype.slice.call(value || [])));
+      dataSource = new ArrayDataSource<T>(value as T[] | Observable<T[]>);
     }
+
+    this._dataSourceChanges.next(dataSource);
   }
   _cdkVirtualForOf: DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined;
 
@@ -111,6 +124,10 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
     this._cdkVirtualForTrackBy = fn ?
         (index, item) => fn(index + (this._renderedRange ? this._renderedRange.start : 0), item) :
         undefined;
+
+    if (this._differDataSource) {
+      this._differDataSource.switchTrackBy(this._cdkVirtualForTrackBy);
+    }
   }
   private _cdkVirtualForTrackBy: TrackByFunction<T> | undefined;
 
@@ -223,6 +240,10 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
   }
 
   ngDoCheck() {
+    if (this._differDataSource) {
+      this._differDataSource.doCheck();
+    }
+
     if (this._differ && this._needsUpdate) {
       // TODO(mmalerba): We should differentiate needs update due to scrolling and a new portion of
       // this list being rendered (can use simpler algorithm) vs needs update due to data actually
@@ -270,6 +291,10 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
 
     if (oldDs) {
       oldDs.disconnect(this);
+
+      if (oldDs === this._differDataSource) {
+        this._differDataSource = null;
+      }
     }
 
     this._needsUpdate = true;

src/cdk/scrolling/virtual-scroll-viewport.spec.ts

@@ -523,6 +523,28 @@ describe('CdkVirtualScrollViewport', () => {
       expect(dataSource.disconnect).toHaveBeenCalled();
     }));
 
+    it('should work if the iterable is mutated', fakeAsync(() => {
+      testComponent.items = [];
+      finishInit(fixture);
+
+      expect(viewport.getRenderedRange())
+          .toEqual({start: 0, end: 0}, 'no items should be rendered');
+
+      testComponent.items.push(1, 2, 3);
+      fixture.detectChanges();
+      flush();
+
+      expect(viewport.getRenderedRange())
+          .toEqual({start: 0, end: 3}, 'newly emitted items should be rendered');
+
+      testComponent.items.pop();
+      fixture.detectChanges();
+      flush();
+
+      expect(viewport.getRenderedRange())
+          .toEqual({start: 0, end: 2}, 'last item to be removed');
+    }));
+
     it('should trackBy value by default', fakeAsync(() => {
       testComponent.items = [];
       spyOn(testComponent.virtualForOf, '_detachView').and.callThrough();

tools/public_api_guard/cdk/collections.d.ts

@@ -13,6 +13,14 @@ export declare abstract class DataSource<T> {
     abstract disconnect(collectionViewer: CollectionViewer): void;
 }
 
+export declare class DifferDataSource<T> extends DataSource<T> {
+    constructor(_differs: IterableDiffers, _iterable: T[], trackBy?: TrackByFunction<T>);
+    connect(): Observable<T[] | ReadonlyArray<T>>;
+    disconnect(): void;
+    doCheck(): void;
+    switchTrackBy(trackBy?: TrackByFunction<T>): void;
+}
+
 export declare function getMultipleValuesInSingleSelectionError(): Error;
 
 export declare function isDataSource(value: any): value is DataSource<any>;