如何在响应式表单上使用 ng-bootstrap Typeahead 组件

Question

我正在尝试在 Angular 2 的 Reactive Form 上使用 ng-bootstrap Typeahead 组件，但在查看 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)

我做错了什么？最好有一个关于如何在 Reactive Forms 上使用 ng-bootstrap 组件的一般指南，因为这个例子是基于模板的。

谢谢！

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));
}

在 text$ 修复之前添加 return 语句。

如何在响应式表单上使用 ng-bootstrap Typeahead 组件

How to use ng-bootstrap Typeahead component on a Reactive Form

angular

twitter-bootstrap-4

ng-bootstrap