fix(cdk/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;
+  }
+
+  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 './dispose-view-repeater-strategy';

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

@@ -10,6 +10,7 @@ import {
   ArrayDataSource,
   CollectionViewer,
   DataSource,
+  DifferDataSource,
   ListRange,
   isDataSource,
   _RecycleViewRepeaterStrategy,
@@ -95,20 +96,33 @@ export class CdkVirtualForOf<T> implements
   /** 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 {
       // If value is an an NgIterable, convert it to an array.
-      this._dataSourceChanges.next(new ArrayDataSource<T>(
-          isObservable(value) ? value : Array.from(value || [])));
+      dataSource = new ArrayDataSource<T>(isObservable(value) ? value : Array.from(value || []));
     }
+
+    this._dataSourceChanges.next(dataSource);
   }
 
   _cdkVirtualForOf: DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined;
@@ -126,6 +140,10 @@ export class CdkVirtualForOf<T> implements
     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;
 
@@ -255,6 +273,10 @@ export class CdkVirtualForOf<T> implements
   }
 
   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
@@ -303,6 +325,10 @@ export class CdkVirtualForOf<T> implements
 
     if (oldDs) {
       oldDs.disconnect(this);
+
+      if (oldDs === this._differDataSource) {
+        this._differDataSource = null;
+      }
     }
 
     this._needsUpdate = true;

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

@@ -574,6 +574,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._viewContainerRef, 'detach').and.callThrough();

tools/public_api_guard/cdk/collections.d.ts

@@ -60,6 +60,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>;