ngx-bootstrap typeahead with optionslisttemplate不尊重typeaheadOptionsInScrollableView值

问题描述 投票:-1回答:1

我重新讨论的问题 - 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属性中的列表项height * count设置容器高度。该值返回undefined。

ngx-bootstrap by:

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

我使用角度7.x(最新),bootstrap 4.3.1,ngx-bootstrap 3.1.1

任何帮助赞赏。

- 艾德

angular typeahead ngx-bootstrap
1个回答
0
投票

文档页面指出optionsListTemplate有3个模板变量:matches,itemTemplate,query。所以我认为他们从未考虑到这一点

最简单和最快速的修复是切片匹配数组=>

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

这最多只能显示6个元素

希望能帮助到你

© www.soinside.com 2019 - 2024. All rights reserved.