NgbTypeahead没有显示下拉列表?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (263)

我正在尝试使用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
  • bootstrap 3.3.0

如果有人能说明我失败的地方,我会永远感激(好吧,至少在今年年底)。

提问于
用户回答回答于

您的地图功能不会返回任何内容。

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

扫码关注云+社区

领取腾讯云代金券