ngbTypeAhead никогда не показывает предложения - PullRequest
Новая
       6

ngbTypeAhead никогда не показывает предложения

0 голосов
/ 06 июня 2018

Я обнаружил очень странное поведение с ng-boostrap для приложения, которое я разрабатываю.

Я использую ng-bootstrap: 1.1.x с Angular 5.2.x

component.html

имеет карточку bootstrap 4-alpha.(код сокращен для пивоварения) 

<div class="card-block">
                        <label for="typeahead-template"><span>Search</span></label>
                        <input id="typeahead-template"
                               type="text"
                               class="form-control"
                               [(ngModel)]="searchModel"
                               [ngbTypeahead]="search"
                               [resultTemplate]="rt"
                               [inputFormatter]="formatter"
                        >
                        <ng-template #rt let-r="result" let-t="term">
                            {{ r.translatedProperty}}
                        </ng-template>
                    <select size="10" class="form-control mr-4">
                        <optgroup label="Properties">
                            <option *ngFor="let eachVal of dataResults">
                                {{eachVal.translatedProperty}}
                            </option>
                        </optgroup>
                        <optgroup label="References">
                            <option *ngFor="let eachVal of objResults">
                                {{eachVal.translatedProperty}}
                            </option>
                        </optgroup>
                    </select>
</div>

Вывод выглядит следующим образом:

Card Image

component.ts

this.propertyResults - это пустой массив типа any, определенный как public, в котором хранится ответ от сервера. 

 // Autocompletion Implementation from NG-BOOTSTRAP
    public search = (text$: Observable<string>) =>
        text$.pipe(
            debounceTime(200),
            map((term: string) => term === '' ? []
                : this.propertyResults.filter(v => v.translatedProperty.toLowerCase()
                    .indexOf(term.toLowerCase()) > -1).slice(0, 10))
    );
    public formatter = (x: {translatedProperty: string}) => x.translatedProperty;

работает

Бэкэнд вызывается и информация сохраняетсяв массиве this.propertyResults, а затем пользователь переходит к поиску чего-либо в поле input, следовательно, вызывая search для Typeahead.

data

данные с сервера выглядят так: 

[
  {
    "propertyURL": "http://semanticweb.org/blahblah",
    "datatypeProperty": true,
    "objectProperty": false,
    "translatedProperty": "AverageDeliveryTimeInDays"
  },
  .. so on
]

Токовый выход

Никаких предложений не отображается с ng-template No suggestion

ПРИМЕЧАНИЕ : наоборот, когда янажмите клавишу Tab Я получу предложение заполнено!Как так?У меня есть StackBlitz Пример для того же, и там работает отлично.Но при использовании того же кода в приложении я не вижу предложений.

Это как-то связано с разметкой внутри карты?Мне нужен шаблон предложения для показа, так как он важен для приложения.

1 Ответ

0 голосов
/ 08 июня 2018

Очевидно, что компонент хорошо работает с Bootstrap 4.1.1 и предыдущей версией, которую я использовал, была Bootstap 4-alphav3 , которая могла вызвать проблемы.

...