fix(select): exception when initialized with large amount of options

Fixes an error being thrown by `mat-select` when it is initialized with a large amount of pre-selected options. The issue comes from the fact that we add a change listener right before the initial values are assigned rather than afterwards.

Fixes #12504.

Author: crisbeto

src/material/select/select.spec.ts

@@ -2739,8 +2739,9 @@ describe('MatSelect', () => {
 
     it('should be able to programmatically select a falsy option', fakeAsync(() => {
       const fixture = TestBed.createComponent(FalsyValueSelect);
-
       fixture.detectChanges();
+      flush();
+
       fixture.debugElement.query(By.css('.mat-select-trigger'))!.nativeElement.click();
       fixture.componentInstance.control.setValue(0);
       fixture.detectChanges();
@@ -3344,6 +3345,8 @@ describe('MatSelect', () => {
 
         let groupFixture = TestBed.createComponent(SelectWithGroups);
         groupFixture.detectChanges();
+        flush();
+
         trigger = groupFixture.debugElement.query(By.css('.mat-select-trigger'))!.nativeElement;
         formField = groupFixture.debugElement.query(By.css('mat-form-field'))!.nativeElement;
 
@@ -4052,7 +4055,8 @@ describe('MatSelect', () => {
   describe('with multiple selection', () => {
     beforeEach(async(() => configureMatSelectTestingModule([
       MultiSelect,
-      MultiSelectWithLotsOfOptions
+      MultiSelectWithLotsOfOptions,
+      MultiSelectWithLotsOfPreselectedOptions
     ])));
 
     let fixture: ComponentFixture<MultiSelect>;
@@ -4441,6 +4445,16 @@ describe('MatSelect', () => {
 
       expect(() => {
         lotsOfOptionsFixture.componentInstance.checkAll();
+        flush();
+      }).not.toThrow();
+    }));
+
+    it('should not throw with a large amount of preselected options', fakeAsync(() => {
+      fixture.destroy();
+
+      const lotsOfOptionsFixture = TestBed.createComponent(MultiSelectWithLotsOfPreselectedOptions);
+
+      expect(() => {
         lotsOfOptionsFixture.detectChanges();
         flush();
       }).not.toThrow();
@@ -5267,3 +5281,18 @@ class MultiSelectWithLotsOfOptions {
     this.value = [];
   }
 }
+
+
+@Component({
+  template: `
+    <mat-form-field>
+      <mat-select multiple [ngModel]="value">
+        <mat-option *ngFor="let item of items" [value]="item">{{item}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+  `
+})
+class MultiSelectWithLotsOfPreselectedOptions {
+  items = new Array(1000).fill(0).map((_, i) => i);
+  value = [...this.items];
+}

src/material/select/select.ts

@@ -85,10 +85,10 @@ import {
   distinctUntilChanged,
   filter,
   map,
-  startWith,
   switchMap,
   take,
   takeUntil,
+  startWith,
 } from 'rxjs/operators';
 import {matSelectAnimations} from './select-animations';
 import {
@@ -547,13 +547,16 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
 
   ngAfterContentInit() {
     this._initKeyManager();
+    this._resetOptions();
 
-    this._selectionModel.changed.pipe(takeUntil(this._destroy)).subscribe(event => {
-      event.added.forEach(option => option.select());
-      event.removed.forEach(option => option.deselect());
+    this._initializeSelection().then(() => {
+      this._selectionModel.changed.pipe(takeUntil(this._destroy)).subscribe(event => {
+        event.added.forEach(option => option.select());
+        event.removed.forEach(option => option.deselect());
+      });
     });
 
-    this.options.changes.pipe(startWith(null), takeUntil(this._destroy)).subscribe(() => {
+    this.options.changes.pipe(takeUntil(this._destroy)).subscribe(() => {
       this._resetOptions();
       this._initializeSelection();
     });
@@ -829,10 +832,10 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     return !this._selectionModel || this._selectionModel.isEmpty();
   }
 
-  private _initializeSelection(): void {
+  private _initializeSelection(): Promise<void> {
     // Defer setting the value in order to avoid the "Expression
     // has changed after it was checked" errors from Angular.
-    Promise.resolve().then(() => {
+    return Promise.resolve().then(() => {
       this._setSelectionByValue(this.ngControl ? this.ngControl.value : this._value);
       this.stateChanges.next();
     });