web-dev-qa-db-ja.com

NgbTypeahead selectItemクリックされた項目を取得ngBootstrap angular2

この answer では、selectItemを使用してselectイベントを取得するように説明されました。

ただし、この時点では、テキストボックスにバインドしたモデルは、選択項目ではなく、ユーザーが入力した元のテキストのままです。

私が使う

(selectItem)="search(model)"

イベントを取得するには、TSで

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

}

しかし、前述のように、それは、入力されたテキストの選択ではなく、ユーザーが入力したテキストで私のバックエンドを呼び出します。

私のバックエンドのログ

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

2番目は/ api/search/$ actualSelectedItemである必要があります。

angularbootstrap-typeaheadng-bootstrap
14
Wilbert

以下のように選択したアイテムを取得するには、$eventを使用する必要があります

<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

48
Aravind