title: autocomplete [displayWith] doesn't display name
body: <p>I'm using autocomplete material for my project but I don't understand how to use [displayWith]. I try  some example but not display name in html, only id.</p>
  
  <p>My html code:</p>
  
  <pre><code>&lt;form [formGroup]="editClientForm"&gt;
    &lt;input formControlName="city_id" id="city_id" matInput placeholder="Select City*" aria-label="State" [matAutocomplete]="auto1"
      autoActiveFirstOption [formControl]="city"&gt;
    &lt;mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFnCity"&gt;
      &lt;mat-option (onSelectionChange)="updateForm($event, city.city_id, 'city_id')" *ngFor="let city of filteredOptionsCity | async"
        [value]="city.name"&gt;
        {{ city.name }}
      &lt;/mat-option&gt;
    &lt;/mat-autocomplete&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My ts component:</p>
  
  <pre><code>  cityid = 0;
    filteredOptionsCity: any;
    city: FormControl = new FormControl();
    editClientForm: FormGroup;
      this.editClientForm = this.fb.group({
        'city_id': new FormControl('', Validators.required),
           });
    ngOnInit() {
      this.filteredOptionsCity = this.city.valueChanges.pipe(
        startWith(''),
        map(value =&gt; this.filterCity(value))
      );
  }
  
    populateForm() {
      this.activatedRoute.params.subscribe(
        params =&gt; {
          this.clientService.getClientById(params['id']).subscribe(
            client =&gt; {
              this.client = client;
              console.log(client)
              this.editClientForm.controls['city_id'].setValue(client.city);
              console.log(client.city);
            }
          );
        }
      );
    }
    // City
    filterCity(val: string): City[] {
      if (val) {
        let filterValue = val.toLowerCase();
        console.log(this.cityes)
        return this.cityes.filter(city =&gt; city.name.toLowerCase().startsWith(filterValue));
      }
  
      return this.cityes;
    }
  
    updateForm(ev: any, idd: any, componentid: any) {
  
      if (ev.isUserInput) {
        if (componentid === 'city_id') {
          this.cityid = idd;
          this.editClientForm['controls']['city_id'].setValue(ev.source.value);
        } else {
          console.log('test');
        }
      }
    }
  </code></pre>
  
  <p>My class Client:</p>
  
  <pre><code>export class Client {  
  city: City[];}
  </code></pre>
  
  <p>My class City:</p>
  
  <pre><code>export class City {
    city_id: string;
    name: string; }
  </code></pre>
  
  <p>In html show me clity_id, I want city name. </p>
  
  <p>I try to use this code, but nothing happends:</p>
  
  <pre><code>   getName(productid: string) {
        const [filteredProdG] = this.cityes.filter(pt =&gt; pt.city_id === productid);
  
     if (typeof filteredProdG !== 'undefined' &amp;&amp; productid === filteredProdG.city_id) {
         return filteredProdG.name;
       } 
     }
  
  1.   displayFnCity(city?: City): string {
           console.log(city ? city.name : undefined) //show undefined
       return city ? city.name : undefined;
        }
  2.  displayFnCity(city) {
      console.log(city.name) //show undefined
      return city.name;
    }
  </code></pre>
  
  <p>3. If I try <code>[displayWith]="displayFn"</code> or <code>[displayWith]="displayFnCity"</code>   show in html only  id_city</p>
  
  <p>Please any idea how to solve this issue?</p>