Как использовать ng-bootstrap Компонент Typeahead в реактивной форме

Question

Я пытаюсь использовать компонент Typeahead ng-bootstrap в реактивной форме с угловым 2 и, посмотрев код примера на Typeahead's documentation, я не могу заставить его работать ,

В настоящее время у меня есть что-то вроде:

<input type="text" aria-describedby="cityValid" class="form-control" id="inputCity" [formControl]="userForm.controls.city" [ngbTypeahead]="search"> 

С в search функции почти идентичного как пример кода, но это не удается с помощью следующей трассировки стека

error_handler.js:53 TypeError: Cannot read property 'subscribe' of undefined 
at NgbTypeahead._subscribeToUserInput (typeahead.js:158) 
at NgbTypeahead.ngOnInit (typeahead.js:52) 
at DebugAppView._View_UserFormComponent0.detectChangesInternal (UserFormComponent.ngfactory.js:1093) 
at DebugAppView.AppView.detectChanges (view.js:271) 
at DebugAppView.detectChanges (view.js:376) 
at DebugAppView.AppView.detectViewChildrenChanges (view.js:297) 
at DebugAppView._View_ExecutionFormComponent3.detectChangesInternal (ExecutionFormComponent.ngfactory.js:551) 
at DebugAppView.AppView.detectChanges (view.js:271) 
at DebugAppView.detectChanges (view.js:376) 
at DebugAppView.AppView.detectContentChildrenChanges (view.js:289) 

Что я делаю не так? Было бы здорово иметь общее руководство о том, как использовать компонент ng-bootstrap в Reactive Forms, так как пример основан на основанных на шаблонах.

Спасибо!

Answer 1

Ничего, проблема заключалась в том, что я взял функцию поиска, которая появилась на примере и преобразовала ее в обычную функцию, но не возвращая никакого значения.

Я имел

searchCity (text$: Observable<string>) { 
    text$ 
    .debounceTime(200) 
    .distinctUntilChanged() 
    .map(term => term.length < 2 ? [] 
    : cities.filter(v => new RegExp(term, 'gi').test(v)).splice(0, 10)); 
} 

Добавление return заявление до text$ основных вещей.