2017-01-12 29 views
1

私はng-bootstrap.github.ioのresult exampleのテンプレートを使用しています。Angular 2 ng-bootstrapのtypeaheadデフォルト/初期値の設定方法は?

これは完全に正常に動作します。私はユーザーがフォームを使って都市を入力するためにそれを使用します。

問題はユーザーの詳細を編集していることです。そのユーザーのために以前に保存した都市をどのように埋め込むかはわかりません。これは私がHTMLに持っているものである:これは、コンポーネントからである

<template #rt let-r="result" let-t="term"> 
    {{ r.name}} 
</template> 
<input (blur)="lostFocus($event)" class="form-control" formControlName="city_obj" type="text" [(ngModel)]="typeaheadModel" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem) = "selectItem($event)"> 

search = (text$: Observable<string>) => 
text$ 
.debounceTime(200) 
.map(term => term === '' ? [] 
    : this.cities.filter(v => new RegExp(term, 'gi').test(v.name)).slice(0, 10)); 
formatter = (x: {name: string}) => x.name; 

私はモデル駆動型フォームを使用します。

データベースでは、都市が別のテーブルにあるため、ユーザーの都市IDのみを保存します。

フォームビルダーでは、私はcity_idフィールドとcity_objを持っています。

APIは、city_idのみを保存し、city_objは無視します。

selectItemイベントを使用して、コンポーネントのcity_idフィールドを設定します。

先に保存した都市を入力して先読み機能を維持するにはどうしたらよいですか?

答えて

0

自分で発見しました。

同じオブジェクトをフォームコントロールに設定するだけでしたが、debounceTimeの後に設定してください。

+1

回答をソリューションコードで更新できますか? – Chetan

+1

解決策の後にソースコードを更新できますか? @ igor –

関連する問題