web-dev-qa-db-fra.com

NgbTypeahead selectItem cliquez sur l'élément ngBootstrap angular2

Dans ce réponse , il m'a été expliqué d'utiliser selectItem pour obtenir l'événement select.

Mais à ce stade, le modèle que j'ai lié à la zone de texte est toujours le texte d'origine que l'utilisateur a tapé, pas l'élément de sélection.

J'utilise

(selectItem)="search(model)"

pour obtenir l'événement, et en TS

search(model) { 
this._service.search(model).subscribe(
  results => this.results = results,
  error => this.errorMessage = <any>error);

}

mais comme mentionné ci-dessus, cela appelle mon backend avec le texte tapé par l'utilisateur, pas le texte complet de l'élément sélectionné de la tête de frappe.

Mes journaux backend

2017/03/24 20:44:14 /api/typeahead/ok
2017/03/24 20:44:14 /api/search/ok

où le second doit être/api/search/$ actualSelectedItem.

angularbootstrap-typeaheadng-bootstrap
14
Wilbert

Vous devez utiliser $event pour obtenir les éléments sélectionnés comme ci-dessous

<input type="text" class="form-control" (selectItem)="selectedItem($event)" [(ngModel)]="model" [ngbTypeahead]="search" [resultFormatter]="formatter" />
<hr>
<pre>Model: {{ model | json }}</pre>
clicked item {{clickedItem}}

Votre méthode doit être aussi

selectedItem(item){
    this.clickedItem=item.item;
    console.log(item);
  }

LIVE DEMO

48
Aravind