如何将 header 添加到 ngbtypeahead window？

Question

我正在尝试在 Angular 中实现预输入功能。为此，我使用 ng-bootstrap 中的 ngbTypeahead，如下所示。

 <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>

这是显示类似

的结果

结果 1
结果2
结果 3

但我想添加一个 header，结果的格式应为

结果是
结果 1
结果2
结果 3

有人可以帮忙吗？

Answer 1

ng-bootstrap 的 Typeahead 组件不支持此功能，但是您可以使用 CSS 在结果之前插入文本。此解决方案的唯一问题是您需要使用 ::ng-deep 即 deprecated and likely to be dropped by Angular soon.

将此添加到组件的 CSS:

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

显示结果时您应该会看到以下内容：

这将在预输入结果前加上指定为 content 属性值的文本。

请参阅 this StackBlitz 进行演示

如何将 header 添加到 ngbtypeahead window？

How to add header to the ngbtypeahead window?

angular-bootstrap

ng-bootstrap