feat(cdk/scrolling): update CdkVirtualForOf to work with sets. (#20594)

The previous usage of `Array.prototype.slice.call` does not handle `Set`
objects appropriately (since a `Set` does not have a `length` property).
Updated it to use `Array.from`.

Fixes #20210.

(cherry picked from commit e15f82c)

Author: howardjing

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

@@ -105,9 +105,9 @@ export class CdkVirtualForOf<T> implements
     if (isDataSource(value)) {
       this._dataSourceChanges.next(value);
     } else {
-      // Slice the value if its an NgIterable to ensure we're working with an array.
+      // If value is an an NgIterable, convert it to an array.
       this._dataSourceChanges.next(new ArrayDataSource<T>(
-          isObservable(value) ? value : Array.prototype.slice.call(value || [])));
+          isObservable(value) ? value : Array.from(value || [])));
     }
   }
 

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

@@ -444,7 +444,7 @@ describe('CdkVirtualScrollViewport', () => {
           .toBe(0, 'should render from first item');
     }));
 
-    it('should handle dynamic item array keeping position when possibile', fakeAsync(() => {
+    it('should handle dynamic item array keeping position when possible', fakeAsync(() => {
       testComponent.items = Array(100).fill(0);
       finishInit(fixture);
       triggerScroll(viewport, testComponent.itemSize * 50);
@@ -516,6 +516,15 @@ describe('CdkVirtualScrollViewport', () => {
       }
     }));
 
+    it('should work with a Set', fakeAsync(() => {
+      const data = new Set(['hello', 'world', 'how', 'are', 'you']);
+      testComponent.items = data as any;
+      finishInit(fixture);
+
+      expect(viewport.getRenderedRange())
+          .toEqual({start: 0, end: 4}, 'newly emitted items should be rendered');
+    }));
+
     it('should work with an Observable', fakeAsync(() => {
       const data = new Subject<number[]>();
       testComponent.items = data as any;