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函数应该可以正常工作。但是我无法用响应填充组件。

我正在使用：

角度6.1.0
引导程序4.1.3
ng-bootstrap 3.3.0

如果有人能阐明我的失败之处，我将永远感激不已（至少到年底为止）。

Answer 1

您的地图函数不返回任何内容。

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

NgbTypeahead未显示下拉列表

2 个答案: