ngx-bootstrap typeahead с 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. Это значение возвращается undefined.

сайт ngx-bootstrap:

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

Я использую angular 7.x (последняя версия), bootstrap 4.3.1, ngx-bootstrap 3.1.1

Любая помощь приветствуется.

-- Ed


angular ngx-bootstrap typeahead
person Ed Lang    schedule 14.11.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

На случай, если кто-то все еще ищет ответ, я «исправил» проблему в своем коде, заключив optionsListTemplate внутрь div, к которому просто прикреплен специальный CSS-класс. В основном, поскольку для typeaheadComponent нет информации о высоте, я указываю ее сам и устанавливаю для этого div значение

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

Так что это всего лишь исправление CSS, но оно выполняет свою работу за меня. При этом не используется typeaheadOptionsInScrollableView, поэтому не устанавливайте эту опцию. Кроме того, я бы рекомендовал установить для свойства input typeaheadOptionsLimit значение больше, чем то, что вы ожидаете отобразить внутри прокручиваемого контейнера. По умолчанию он не отображает ничего, кроме 20 (?) Записей.

person evilstiefel    schedule 20.01.2020

arrow_upward
0
arrow_downward

На странице документации указано, что в optionsListTemplate есть 3 переменных шаблона: совпадения, itemTemplate, query. Поэтому я думаю, что они никогда не думали об этом

Самое простое и быстрое решение - разрезать массив совпадений =>

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

это отобразит только до 6 элементов

Надеюсь, это поможет

person Gabriel Lopez    schedule 14.11.2018
comment
Я думаю, это имитирует атрибут [typeaheadOptionsLimit], который сокращает исходный список до тех 6 элементов. Я ищу, чтобы в прокручиваемом представлении отображалось 6 элементов, но при этом можно было прокручивать оставшиеся элементы соответствия. В прикрепленной ссылке stackblitz параметры показывают все элементы в одном большом списке вместо прокрутки с отображением 6. - person Ed Lang; 15.11.2018
comment
Ах да ... это правильно ... совершенно не понял ... я подумаю что-нибудь еще - person Gabriel Lopez; 15.11.2018