title: Getting "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked" Error with Md Autocomplete
body: <p>I've been wrestling with this for a while. I've seen lots of people getting this error, but am not sure why I'm getting it in my situation.</p>
  
  <blockquote>
    <p>ExpressionChangedAfterItHasBeenCheckedError: Expression has changed
    after it was checked. Previous value: '[object Object]'. Current
    value: '[object Object],[object Object]'.</p>
  </blockquote>
  
  <p>It only happens rarely, almost randomly, and I can't seem to duplicate it.</p>
  
  <p>this is my component:</p>
  
  <pre><code>  @Input('jobKey') jobKey: String;
    subscription: Subscription;
    job: FirebaseObjectObservable&lt;any&gt;;
  
    customerCtrl: FormControl;
    filteredCustomers: Observable&lt;any[]&gt;;
  
    selectedCustomer: Customer;
  
    constructor(private customerService: CustomerService,
                private dialog: MdDialog,
                private userService: UserService,
                private db: AngularFireDatabase) {
      this.subscription = new Subscription();
      this.customerCtrl = new FormControl();
      this.selectedCustomer = new Customer();
  
      customerService.getCustomers().then(customer=&gt;{
        this.filteredCustomers = this.customerCtrl.valueChanges
            .startWith(null)
            .map(cust =&gt; cust ? this.filterCustomers(cust) : this.customerService.customers.slice());
      });
    }
  
    filterCustomers(name: string) {
      return this.customerService.customers.filter(customer =&gt;
        customer.DisplayName.toLowerCase().indexOf(name.toLowerCase()) === 0);
    }
  
    customerSelected(event, customer){
      if (event.source.selected) {
        this.selectedCustomer = new Customer();
        this.selectedCustomer = customer;
        this.selectedCustomer.key = customer.$key;
        this.saveCustomerToJobInFB();
      }
    }
  
    createNewCustomer(){    
      let dialogRef = this.dialog.open(SimpleCreateCustomerComponent);
      dialogRef.afterClosed().subscribe(response =&gt; {
        if(response){
          this.selectedCustomer = new Customer();
          this.selectedCustomer = &lt;Customer&gt;response;
          this.selectedCustomer.key = response.key;
          this.saveCustomerToJobInFB();
          this.customerCtrl.setValue(response.DisplayName);
          console.log("Created new customer");
        }else{
          console.log("Cancelled customer creation");
        }
      });
  
    }
  
    saveCustomerToJobInFB(){
      let updates = {
        customerName: this.selectedCustomer.DisplayName,
        customerId: this.selectedCustomer.key
      }
      this.job.update(updates);
    }
  
    ngOnChanges(changes){
      this.userService.getUser().then(user=&gt;{
        this.subscription.unsubscribe();
        this.job = this.db.object(`/jobs/${user['cid']}/${this.jobKey}`);
        this.subscription = this.job.subscribe(job =&gt; {
          this.selectedCustomer.key = job.customerId;
          this.selectedCustomer.DisplayName = job.customerName;
          this.customerCtrl.setValue(job.customerName);
        });
      });
    }
  }
  </code></pre>
  
  <p>and my template: </p>
  
  <pre><code>&lt;form&gt;
      &lt;md-form-field&gt;
        &lt;input mdInput (blur)="cust.value = selectedCustomer.DisplayName" placeholder="Customer" #cust [mdAutocomplete]="auto" [formControl]="customerCtrl"&gt;
        &lt;md-autocomplete (onSelectionChange)="customerSelected(customer)" #auto="mdAutocomplete"&gt;     &lt;------ [ERROR]
          &lt;md-option (click)="createNewCustomer()"&gt;
            &lt;div&gt;
              &lt;div&gt;
                &lt;md-icon&gt;add&lt;/md-icon&gt;
              &lt;/div&gt;
              &lt;div&gt;
                Add New Customer
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/md-option&gt;
          &lt;md-option (onSelectionChange)="customerSelected($event, customer)" *ngFor="let customer of filteredCustomers | async" [value]="customer.DisplayName"&gt;
            &lt;span&gt;{{ customer.DisplayName }}&lt;/span&gt; |
            &lt;small&gt;Details: {{customer.$key}}&lt;/small&gt;
          &lt;/md-option&gt;
        &lt;/md-autocomplete&gt;
      &lt;/md-form-field&gt;
  &lt;/form&gt;
  </code></pre>