时间戳

首页 > 解决方案 > ngx-bootstrap typeahead with optionslisttemplate不尊重typeaheadOptionsInScrollableView值

angular - ngx-bootstrap typeahead with optionslisttemplate不尊重typeaheadOptionsInScrollableView值

问题描述

我的问题娱乐 - StackBlitz 链接：https ://stackblitz.com/edit/angular-5qqtrs

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

我希望列表容器下拉列表在需要滚动之前滚动显示有限数量的项目（固定高度）（默认情况下这是 5 个项目）。

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

这显示了我想要的

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

这显示了我得到的

在研究 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

任何帮助表示赞赏。

——埃德

标签： angulartypeaheadngx-bootstrap

解决方案

万一有人还在寻找答案，我在我的代码中“修复”了这个问题，方法是包装optionsListTemplate一个div只有一个特殊的 CSS 类附加到它的内部。基本上，由于 typeaheadComponent 没有可用的高度信息，我自己指定一个并将其设置div为

.scollable-container {
    max-height: 12rem;
    overflow-y: auto;
}

所以它只是一个 CSS 修复，但它为我完成了这项工作。这没有使用typeaheadOptionsInScrollableView，因此请务必不要设置该选项。另外，我建议将 input 属性设置为typeaheadOptionsLimit比您期望在可滚动容器内显示的内容更大的值。默认情况下，它不会呈现超过 20(?) 个条目的任何内容。

推荐阅读