如何将标题添加到ngbtypeahead窗口？

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>

这将显示类似的结果

• result1
• result2
• result3

但是我想要添加标题，结果应采用以下格式

• 结果是
• result1
• result2
• result3

有人可以帮忙吗？

Answer 1

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

将此添加到组件的CSS：

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

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

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

请参阅this StackBlitz进行演示