NgbTypeahead selectItem获取被单击的项目ngBootstrap angular2 [英] NgbTypeahead selectItem get clicked item ngBootstrap angular2

问题描述

在此答案中，向我解释了使用selectItem来获取select事件.

In this answer, it was explained to me to use selectItem to get the select event.

但是在这一点上，我绑定到文本框的模型仍然是用户键入的原始文本，而不是选择项.

But at this point, the model I bound to the text box is still the original text the user typed, not the select item.

我使用

(selectItem)="search(model)"

获取事件，并在TS

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

}

但是如上所述，它使用用户键入的文本而不是输入的所选项目的全文来调用我的后端.

but as mentioned above, that calls my backend with the user-typed text, not the full text of the selected item of the typeahead.

我的后端日志

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

第二个应该是/api/search/$ actualSelectedItem.

where the second should be /api/search/$actualSelectedItem.

推荐答案

您应该使用$event来获取如下所示的选定项

You should be using $event to get the selected Items as below

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

您的方法应为

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

实时演示

LIVE DEMO

这篇关于NgbTypeahead selectItem获取被单击的项目ngBootstrap angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！