ngx-bootstrap typeahead with optionslisttemplate不尊重typeaheadOptionsInScrollableView值答案

【问题标题】：ngx-bootstrap typeahead with optionslisttemplate not respecting typeaheadOptionsInScrollableView valuengx-bootstrap typeahead with optionslisttemplate不尊重typeaheadOptionsInScrollableView值
【发布时间】：2019-04-17 20:21:45
【问题描述】：

我的问题 - 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

任何帮助表示赞赏。

-- 埃德

【问题讨论】：

标签： angular typeahead ngx-bootstrap

【解决方案1】：

如果有人仍在寻找答案，我通过将 optionsListTemplate 包装在仅附加了一个特殊 CSS 类的 div 内来“修复”我的代码中的问题。基本上，由于 typeaheadComponent 没有可用的高度信息，我自己指定一个并将 div 设置为

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

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

【讨论】：

【解决方案2】：

文档页面指出 optionsListTemplate 有 3 个模板变量：matches、itemTemplate、query。所以我认为他们从来没有考虑过这一点

最简单、最快的解决方法是对匹配数组进行切片 =>

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

这最多只能显示 6 个元素

希望对你有帮助

【讨论】：

我认为这将模仿 [typeaheadOptionsLimit] 属性，该属性将源列表减少为仅提供这 6 个项目。我正在寻找的是让可滚动视图显示 6 个项目，但仍然能够滚动浏览剩余的匹配项目。在附加的 stackblitz 链接中，选项将所有项目显示在一个大列表中，而不是滚动显示 6 个。
哦，是的...那是正确的...完全错过了理解它...我会想点别的