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
Vous devez vous connecter pour publier un commentaire.
Si vous voulez la totalité de l'objet à être appliqué avec
md-options
, alors vous devez lier à l'option avecstate
et retourstate.name
àdisplayFn
et de cette façon vous n'avez pas à lierthis
.démo plunker.
et si vous voulez lier seulement
state.id
àmd-options
, vous devez faire une boucle parstates
pour trouverstate.name
basé surstate.id
et cette façon de liaisonthis
est nécessaire.démo plunker.
object
(parce que back-end attend leid
) pour être envoyé mon formulaire. Et sur la 2ème approche: Il ne remplissez pas ce que je suis en train de réaliser aussi... dans plunker j'ai utiliséstates
codé en dur de cette façon, seulement dans le but de démontrer... dans mon application j'ai comme 10 de saisie semi-automatique tous d'entre eux sontObservable
, je n'ai pas à vous abonner (et je ne veux pas), donc je n'ai pas les valeurs de cette façon.d'une façon complexe que ce que j'imaginais. selon vos commentaires, peut-être la 1ère option est nettement plus en forme ici, vous pouvez récupérer des
satet.id
. 🙂Eh bien, le problème ici est que le
[displayWith]
est presque rigide... je vais choisir l'une des 2 façons (les deux sont des solutions de contournement pour moi)... en tout cas merci.je suis en train de charger la saisie semi-automatique des valeurs de serveur avant de les récupérer c'est l'exécution de displaywith fonction est la fonction de charge après récupération
Je suis peut-être raté quelque chose, mais tous les Plukr liens dans cet article, résultat rien de plus qu'un "Chargement du Matériau Docs exemple..." message (et un tas d'erreurs JavaScript dans la Console). Je suis vraiment pas sûr si mon portable n'est pas configuré correctement ou si elles ont évolué, de casser tous les codes existants.... ;-(
OriginalL'auteur Pengyy