ng-bootstrap typeahead-显示结果错误

Question

我正在尝试将ng-bootstrap typeahead添加到现有项目中。 我只是从ng-bootstrap示例中添加了演示代码。 （标记为API简单提前输入）

输入值时，会出现一个下拉框，但没有值，尽管我可以突出显示一行，然后单击突出显示的部分会为文本框填充正确的值。

好像文本结果没有被写出来。

HTML显示如下：

<button class="dropdown-item" role="option" type="button">
          <!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]",
  "ng-reflect-ng-template-outlet": "[object Object]"
}-->
      <ngb-highlight _nghost-c2=""><!----></ngb-highlight>

      </button>

和chrome调试工具显示了这一点：

ERROR TypeError: _v.context.formatter is not a function
at Object.eval [as updateDirectives] (NgbTypeaheadWindow.html:3)
at Object.debugUpdateDirectives [as updateDirectives] (vendor.js?v=1IRb52vH45mb7Eaa5E54mqzy79t-CsOu8zFORpABXoI:17823)
at checkAndUpdateView (vendor.js?v=1IRb52vH45mb7Eaa5E54mqzy79t-CsOu8zFORpABXoI:17003)
at callViewAction (vendor.js?v=1IRb52vH45mb7Eaa5E54mqzy79t-CsOu8zFORpABXoI:17368)
at execEmbeddedViewsAction (vendor.js?v=1IRb52vH45mb7Eaa5E54mqzy79t-CsOu8zFORpABXoI:17326)
at checkAndUpdateView (vendor.js?v=1IRb52vH45mb7Eaa5E54mqzy79t-CsOu8zFORpABXoI:17004)
at callViewAction (vendor.js?v=1IRb52vH45mb7Eaa5E54mqzy79t-CsOu8zFORpABXoI:17368)
at execEmbeddedViewsAction (vendor.js?v=1IRb52vH45mb7Eaa5E54mqzy79t-CsOu8zFORpABXoI:17326)
at checkAndUpdateView (vendor.js?v=1IRb52vH45mb7Eaa5E54mqzy79t-CsOu8zFORpABXoI:17004)
at callViewAction (vendor.js?v=1IRb52vH45mb7Eaa5E54mqzy79t-CsOu8zFORpABXoI:17368)

并突出显示以下内容：

<ngb-highlight [result]="formatter(result)" [term]="term"></ngb-highlight>

Answer 1

您应该在Typescript文件中具有格式化程序功能：

formatter = (result: string) => result.toUpperCase();