带有选项列表模板的ngx-bootstrap typeahead不尊重typeaheadOptionsInScrollableView值

时间:2018-11-14 19:26:55

标签: angular typeahead ngx-bootstrap

我的问题重现-StackBlitz链接:https://stackblitz.com/edit/angular-5qqtrs

我在输入文本元素上使用ngx-bootstrap和typeahead指令。我需要能够将optionsListTemplate显示为有限高度的可滚动容器。

我希望列表容器下拉列表在滚动之前显示有限数量的项目(固定高度)(默认为5个项目)。

我设置了typeaheadOptionsInScrollableView(6)和typeaheadScrollable(true)。只要我不使用optionsListTemplate属性,该控件就可以正确显示。

This shows what I want

设置自定义optionsListTemplate时,该控件不会限制所显示选项的列表。

This shows what I get

在研究ngx-bootstrap的源代码-typeahead时,在内部使用guiHeight字段根据列表项的高度*设置容器的高度*来自typeaheadOptionsInScrollableView属性的计数。该值返回未定义。

ngx-bootstrap网站:

https://valor-software.com/ngx-bootstrap/#/typeahead

我正在使用angular 7.x(最新),bootstrap 4.3.1,ngx-bootstrap 3.1.1

任何帮助表示赞赏。

-Ed

1 个答案:

答案 0 :(得分:0)

文档页面指出optionsListTemplate具有3个模板变量:匹配项,itemTemplate和查询。所以我认为他们从来没有想到过

最简单,最快的解决方法是将matchs数组切成薄片=>

<ng-template ngFor let-match let-i="index" [ngForOf]="matches.slice(0,6)">

最多只能显示6个元素

希望有帮助