Я пытаюсь реализовать функциональность опережающего ввода в 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>
Это отображает результат, например
но я хочу добавить заголовок и результат должен быть в формате
Может ли кто-нибудь помочь с этим?
Это не поддерживается компонентом Typeahead ng-bootstrap, однако вы можете использовать CSS для вставки текста перед результатами. Единственная проблема с этим решением заключается в том, что вам нужно использовать ::ng-deep
, который равен устарело и, вероятно, скоро будет удалено Angular.
Добавьте это в CSS вашего компонента:
::ng-deep ngb-typeahead-window:before {
content: "The results are:";
}
и вы должны увидеть следующее, когда отображаются результаты:
Это добавит к результатам ввода текст, указанный в качестве значения свойства content
.
См. это StackBlitz для демонстрации