如何在 ngxTypeahead 的输入框中显示高亮的 typeahead 值？

Question

这是官方的 ngxTypeahead plunker

http://embed.plnkr.co/gV6kMSRlogjBKnh3JHU3/

这里，当我们按下 keyUp 或 keyDown 时，我需要在输入框中显示突出显示（颜色为蓝色）的 typeahead 选项的 innerHTML，类似于 firefox 搜索框 typeahead。我该怎么做？

所以我在执行上述内容时遇到了这个问题

使用jquery我可以像这样得到我的目标元素

var target= $(this).siblings().find("li.active");

现在我变成这样了

这是我的 onKeyUp 函数

onKeyUp($event.key){
     if( $event.keyCode== '38'|| $event.keyCode == '40'){
     var target= $event.srcElement.nextElementSibling.children[4].children[0].innerText;
     }
}

因此，如果我将调试器保留在 Onkey($event.key) 函数中

然后输入 $event.srcElement.nextElementSibling.children

0:div.typeahead-backdrop

1:button.list-group-item

2:button.list-group-item

3:button.list-group-item

4:button.list-group-item.active

5:button.list-group-item

我像上面那样。所以我需要获得活动按钮 innerText。在按钮内部它有一个跨度，我需要它的 innerHTML。是否有任何特定的简单方法可以使用 angular2 访问上述目标？

Answer 1

编辑：

在输入 #ngxTypeahead 上添加引用并在 app.ts 代码中创建一个 viewchild（从 angular 核心导入）

  @ViewChild("ngxTypeahead") ngxTypeahead: any;
   // then simply access the values using this.ngxTypeahead;

在 select 函数中查看我的控制台日志截图 :) https://ibb.co/ehnfgS

如何在 ngxTypeahead 的输入框中显示高亮的 typeahead 值？

How to display the highlighted typeahead value in the inputbox in ngxTypeahead?

jquery

angular2-directives

angular2-template

angular