Comment afficher à l'aide de [displayWith] dans la saisie semi-automatique Material2

J'ai un array qui vient de mon API et je suis en utilisant Material2#saisie semi-automatique de les filtrer... c'est travaillé jusqu'à présent, cependant, je suis dans la merde pour afficher l'autre propriété au lieu de la lié valeur dans option.

Je sais que je dois utiliser displayWith, mais il ne fonctionne pas comme je suis attendu. La fonction appelée comme [displayWith]="displayFn.bind(this)"> juste me renvoie le id, comment puis-je obtenir l'intégralité de l'objet et donc de retour le name sur la fonction.

BTW, j'ai encore envie d'avoir l'id relié à mon FormControl.

Code:

Composant:

export class AutocompleteOverviewExample {
  stateCtrl: FormControl;
  filteredStates: any;

  states = [
    { 
      id: 1,
      name: 'Alabama'
    },
    {
      id: 2,
      name: 'North Dakota'
    },
    {
      id: 3,
      name: 'Mississippi'
    }
  ];

  constructor() {
    this.stateCtrl = new FormControl();
    this.filteredStates = this.filterStates('');
  }

  onKeyUp(event: Event): void {
    this.filteredStates = this.filterStates(event.target.value);
  }

  filterStates(val: string): Observable<any> {
    let arr: any[];
    console.log(val)
    if (val) {
      arr = this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s.name));
    } else {
      arr = this.states;
    }

    //Simulates request
    return Observable.of(arr);
  }

  displayFn(value) {
    //I want to get the full object and display the name
    return value;
  }
}

Modèle:

<md-input-container>
  <input mdInput placeholder="State" (keyup)="onKeyUp($event)" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn.bind(this)">
  <md-option *ngFor="let state of filteredStates | async" [value]="state.id">
    {{ state.name }}
  </md-option>
</md-autocomplete>

En gros, c'est presque la même que question (malheureusement, les deux réponses sont incorrectes ou de jeter des erreurs).

Voici la PLUNKER.

OriginalL'auteur dev_054 | 2017-05-29