NgbTypeahead 不显示下拉菜单

Question

我正在尝试使用 ng-bootstrap 的 NgbTypeahead，但它没有显示带有选项的下拉菜单。

我很确定我做错了什么，在搜索之后，我的 input 元素将 ng-reflect-ngb-typeahead="function (text) { 显示为一个属性，就好像它没有识别 search以某种方式发挥作用。

我的代码在component.ts:

search = (text: Observable<string>) => {
    return text.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => {
        console.log(this.livros.filter((v) => v.titulo.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10));
        term.length < 3 ? [].slice() : this.livros.filter((v) => v.titulo.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10);
      })
    );
  }

摘自component.html：

<div class="row">
  <div class="col-md-12">
    <label for="livro-search">Digite o t&iacute;tulo do livro</label>
    <input id="livro-search" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search">
  </div>
</div>

livros 字段在 ngOnInit 为运行时填充，因此当我尝试搜索时它不为空。

控制台正确输出结果数组，所以我知道 search 函数应该可以工作。但是我无法用响应填充组件。

我正在使用：

Angular 6.1.0
Bootstrap 4.1.3
ng-bootstrap 3.3.0

如果有人能指出我失败的地方，我将永远感激不尽（好吧，至少在今年年底）。

Answer 1

你的地图函数没有return任何东西。

search = (text: Observable<string>) => {
    return text.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => {
        console.log(this.livros.filter((v) => v.titulo.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10));
        return term.length < 3 ? [].slice() : this.livros.filter((v) => v.titulo.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10);
      })
    );
  }

Answer 2

让我们试试这个：

ngb-typeahead-window {
 display: block!important;
}

Answer 3

万一有人再次遇到这个问题：对我来说，我需要在 HTML 中添加 display 和 container 属性，以便显示 Typeahead 下拉列表。

类似于：

      <input id="typeahead-prevent-manual-entry" type="text" display="dynamic" container="body" class="form-control" [(ngModel)]="selection" [ngbTypeahead]="search" [inputFormatter]="formatter" [resultFormatter]="formatter" [editable]='false'/>

NgbTypeahead 不显示下拉菜单

NgbTypeahead not showing dropdown

ng-bootstrap

angular