fix(chips): do not set chips value if there's no ngControl or value (#7285)

Author: tinayuangao

src/lib/chips/chip-list.spec.ts

@@ -41,6 +41,7 @@ describe('MatChipList', () => {
         InputChipList,
         MultiSelectionChipList,
         FalsyValueChipList,
+        SelectedChipList
       ],
       providers: [{
         provide: Directionality, useFactory: () => {
@@ -63,6 +64,21 @@ describe('MatChipList', () => {
       });
     });
 
+    describe('with selected chips', () => {
+      beforeEach(async(() => {
+        fixture = TestBed.createComponent(SelectedChipList);
+        fixture.detectChanges();
+      }));
+
+      it('should not override chips selected', () => {
+        const instanceChips = fixture.componentInstance.chips.toArray();
+
+        expect(instanceChips[0].selected).toBe(true, 'Expected first option to be selected.');
+        expect(instanceChips[1].selected).toBe(false, 'Expected second option to be not selected.');
+        expect(instanceChips[2].selected).toBe(true, 'Expected third option to be selected.');
+      });
+    });
+
     describe('focus behaviors', () => {
       beforeEach(async(() => {
         setupStandardList();
@@ -1027,3 +1043,21 @@ class FalsyValueChipList {
   control = new FormControl();
   @ViewChildren(MatChip) chips: QueryList<MatChip>;
 }
+
+@Component({
+  template: `
+    <mat-chip-list>
+        <mat-chip *ngFor="let food of foods" [value]="food.value" [selected]="food.selected">
+            {{ food.viewValue }}
+        </mat-chip>
+    </mat-chip-list>
+  `
+})
+class SelectedChipList {
+  foods: any[] = [
+    { value: 0, viewValue: 'Steak', selected: true },
+    { value: 1, viewValue: 'Pizza', selected: false },
+    { value: 2, viewValue: 'Pasta', selected: true },
+  ];
+  @ViewChildren(MdChip) chips: QueryList<MdChip>;
+}

src/lib/chips/chip-list.ts

@@ -570,8 +570,10 @@ export class MatChipList implements MatFormFieldControl<any>, ControlValueAccess
     // Defer setting the value in order to avoid the "Expression
     // has changed after it was checked" errors from Angular.
     Promise.resolve().then(() => {
-      this._setSelectionByValue(this.ngControl ? this.ngControl.value : this._value, false);
-      this.stateChanges.next();
+      if (this.ngControl || this._value) {
+        this._setSelectionByValue(this.ngControl ? this.ngControl.value : this._value, false);
+        this.stateChanges.next();
+      }
     });
   }