NgbTypeahead未显示下拉菜单
NgbTypeahead未显示下拉菜单
提问于 2018-10-10 06:21:31
我尝试使用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ítulo do livro</label>
<input id="livro-search" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search">
</div>
</div>在运行ngOnInit时，会填充livros字段，因此当我尝试搜索时，它不会为空。
控制台正确地输出了结果数组，所以我知道search函数应该可以工作。但是我不能用响应填充组件。
我使用的是：
- ng-bootstrap 6.1.0
- Bootstrap 4.1.3 Angular 3.3.0
如果有人能指出我的失败之处，我将永远感激不尽(好吧，至少在年底)。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-10 06:59:16
您的map函数不会返回任何内容。
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);
})
);
}Stack Overflow用户
发布于 2019-04-23 20:00:34
让我们试试这个：
ngb-typeahead-window {
display: block!important;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52730128
复制相关文章
相似问题