Question

我试图将ng-bootstrap typeahead添加到现有项目中。我只是添加了ng-bootstrap example的演示代码。（标有API 简单的Typeahead）

当输入值时，会出现下拉框但没有值，但我可以突出显示一行并单击突出显示的部分，并使用正确的值填充文本框。

几乎就像文字结果没有被写出一样。

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();

ng-bootstrap typeahead - 显示结果时出错

1 个答案: