web-dev-qa-db-fra.com

Comment afficher à l'aide de [displayWith] dans AutoComplete Material2

J'ai un array qui vient de mon API et j'utilise Material2 # AutoComplete pour filtrer cela ... cela fonctionne jusqu'à présent, mais j'ai du mal à afficher une autre propriété au lieu de lié valeur dans option.

Je sais que je dois utiliser displayWith , mais cela ne fonctionne pas comme je m'y attendais. La fonction appelée comme [displayWith]="displayFn.bind(this)"> me renvoie juste le id, comment puis-je obtenir l'objet complet et ainsi retourner la fonction name on.

BTW, je veux toujours avoir l'ID lié dans mon FormControl .

Du 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>

Fondamentalement, c'est presque la même chose que cette question (malheureusement, les deux réponses sont incorrectes ou génèrent des erreurs).

Voici le [~ # ~] plongeur [~ # ~] .

angulartypescriptautocompleteangular-material2
10
dev_054

Si vous souhaitez que l'objet entier soit lié avec md-options, vous devez alors vous lier à l'option avec state et retourner state.name à displayFn et ainsi vous n'avez pas à lier this.

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

displayFn(state) {
  return state.name;
}

plongeur de démonstration.

et si vous souhaitez uniquement lier state.id à md-options, vous devez parcourir states pour trouver state.name basé sur state.id et cette liaison this est nécessaire.

<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>

displayFn(id) {
  if (!id) return '';

  let index = this.states.findIndex(state => state.id === id);
  return this.states[index].name;
}

plongeur de démonstration.

17
Pengyy