title: Multiple autocomplete material angular shows same dropdown
body: <p>My multiple dropdowns work but it shows the same value. I am following <a href="https://material.angular.io/components/autocomplete/overview" rel="noreferrer">angular material component</a>.</p>
  
  <p>I have created different filtered for each array object still shows the same dropdown.</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { FormControl } from '@angular/forms';
  import { Observable } from 'rxjs/Observable';
  import { startWith } from 'rxjs/operators/startWith';
  import { map } from 'rxjs/operators/map';
  import { UsersComponent } from '../users/users.component';
  
  @Component({
    selector: 'app-accommodation',
    templateUrl: './accommodation.component.html',
    styleUrls: ['./accommodation.component.css']
  })
  export class AccommodationComponent {
  
        myControl = new FormControl();
  
        country = [
          new UsersComponent('United States'),
          new UsersComponent('Canada'),
          new UsersComponent('Brazil'),
          new UsersComponent('India'),
          new UsersComponent('China'),
          new UsersComponent('Japan'),
        ];
  
        nationality = [
          new UsersComponent('American'),
          new UsersComponent('Canadian'),
          new UsersComponent('Indian'),
          new UsersComponent('Chinese'),
          new UsersComponent('African'),
          new UsersComponent('Japanese'),
        ];
  
  
        countryFilter: Observable&lt;UsersComponent[]&gt;;
        nationalityfilter: Observable&lt;UsersComponent[]&gt;;
  
        ngOnInit() {
          this.countryFilter = this.myControl.valueChanges
            .pipe(
              startWith&lt;string | UsersComponent&gt;(''),
              map(value =&gt; typeof value === 'string' ? value : value.name),
              map(name =&gt; name ? this.filter(name) : this.country.slice()),
            );
          this.nationalityfilter = this.myControl.valueChanges
            .pipe(
              startWith&lt;string | UsersComponent&gt;(''),
              map(value =&gt; typeof value === 'string' ? value : value.name),
              map(name =&gt; name ? this.filter(name) : this.nationality.slice()),
            );
        }
  
  
        filter(name: string): UsersComponent[] {
  
          return this.country.filter(option =&gt; option.name.toLowerCase().indexOf(name.toLowerCase()) === 0),
                 this.nationality.filter(option =&gt; option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);       
        }
  
        displayFn(users?: UsersComponent): string | undefined {
          return users ? users.name : undefined;
        }
  
  }
  </code></pre>
  
  <p>Below is the HTML code, where I have changed id as per <a href="https://stackoverflow.com/questions/45934244/multiple-autocomplete-in-same-page-with-different-source-in-angular-4-with-angul">this post</a>. Still doesn't work.</p>
  
  <pre class="lang-html prettyprint-override"><code>        &lt;div class="col-sm-6"&gt;
          &lt;mat-form-field class="example-full-width"&gt;
              &lt;input type="text" placeholder="Country" aria-label="Country" matInput [formControl]="myControl" [matAutocomplete]="auto"&gt;
              &lt;mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn"&gt;
                  &lt;mat-option *ngFor="let option of countryFilter | async" [value]="option"&gt;
                      {{ option.name }}
                  &lt;/mat-option&gt;
              &lt;/mat-autocomplete&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
      &lt;!-- col end --&gt;
      &lt;div class="col-sm-6"&gt;
          &lt;mat-form-field class="example-full-width"&gt;
              &lt;input type="text" placeholder="Nationality" aria-label="Nationality" matInput [formControl]="myControl" [matAutocomplete]="auto"&gt;
              &lt;mat-autocomplete #autoNationality="matAutocomplete" [displayWith]="displayFn"&gt;
                  &lt;mat-option *ngFor="let option of nationalityfilter | async" [value]="option"&gt;
                      {{ option.name }}
                  &lt;/mat-option&gt;
              &lt;/mat-autocomplete&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
      &lt;!-- col end --&gt;
  </code></pre>
  
  <p>After @Mjstk update it worked awesome but still shows some error
  <a href="https://i.stack.imgur.com/9Hntt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9Hntt.png" alt="enter image description here"></a></p>