Getting "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked" Error with Md Autocomplete

Question

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.

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: '[object Object],[object Object]'.

It only happens rarely, almost randomly, and I can't seem to duplicate it.

this is my component:

  @Input('jobKey') jobKey: String;
  subscription: Subscription;
  job: FirebaseObjectObservable<any>;

  customerCtrl: FormControl;
  filteredCustomers: Observable<any[]>;

  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=>{
      this.filteredCustomers = this.customerCtrl.valueChanges
          .startWith(null)
          .map(cust => cust ? this.filterCustomers(cust) : this.customerService.customers.slice());
    });
  }

  filterCustomers(name: string) {
    return this.customerService.customers.filter(customer =>
      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 => {
      if(response){
        this.selectedCustomer = new Customer();
        this.selectedCustomer = <Customer>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=>{
      this.subscription.unsubscribe();
      this.job = this.db.object(`/jobs/${user['cid']}/${this.jobKey}`);
      this.subscription = this.job.subscribe(job => {
        this.selectedCustomer.key = job.customerId;
        this.selectedCustomer.DisplayName = job.customerName;
        this.customerCtrl.setValue(job.customerName);
      });
    });
  }
}

and my template:

<form>
    <md-form-field>
      <input mdInput (blur)="cust.value = selectedCustomer.DisplayName" placeholder="Customer" #cust [mdAutocomplete]="auto" [formControl]="customerCtrl">
      <md-autocomplete (onSelectionChange)="customerSelected(customer)" #auto="mdAutocomplete">     <------ [ERROR]
        <md-option (click)="createNewCustomer()">
          <div>
            <div>
              <md-icon>add</md-icon>
            </div>
            <div>
              Add New Customer
            </div>
          </div>
        </md-option>
        <md-option (onSelectionChange)="customerSelected($event, customer)" *ngFor="let customer of filteredCustomers | async" [value]="customer.DisplayName">
          <span>{{ customer.DisplayName }}</span> |
          <small>Details: {{customer.$key}}</small>
        </md-option>
      </md-autocomplete>
    </md-form-field>
</form>