Как добавить заголовок в окно ngbtypeahead?

Question

Я пытаюсь реализовать функциональность typeahead в Angular.Я использую ngbTypeahead из ng-bootstrap для этого, как показано ниже.

 <input id="typeahead-template" type="text" class="form-control form-rounded" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter"  />

 <ng-template #rt let-r="result" let-t="term">
 <img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/'+r['flag']" class="mr-1" style="width: 16px">
 <ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
 </ng-template>

Этот результат отображается как

• result1
• result2
• result3

но я хочузаголовок, который нужно добавить, и результат должен быть в формате

• Результаты:
• result1
• result2
• result3

Может кто-нибудь помочь с этим?

Answer 1

Это не поддерживается компонентом Typeahead ng-bootstrap, однако вы можете использовать CSS для вставки текста перед результатами. Единственная проблема, связанная с этим решением, заключается в том, что вам нужно использовать ::ng-deep, который устарел и, скорее всего, скоро будет удален Angular .

Добавьте это в CSS вашего компонента:

::ng-deep ngb-typeahead-window:before {
  content: "The results are:";
}

и при отображении результатов вы должны увидеть следующее:

Это приведет к тому, что результаты typeahead будут добавлены к тексту, указанному в качестве значения свойства content.

Пожалуйста, посмотрите этот StackBlitz для демонстрации