如何在“Angular2 for TypeScript”（测试版）中获取 li-Element 以添加特定的 CSS 类？

Question

在我的 Angular2 项目中，我试图实现一个搜索框，其结果框类似于 Google。这就是我得到的，它有效，但不幸的是，当您搜索某些内容并按下“向下键”或“向上键”时，结果框中的搜索结果并没有像 Google 中那样突出显示。

这是我的代码：

<input type="search" class="form-control">

// resultbox
<div>
   <ul>
     <li *ngFor="#item of items">{{ item.text }}</li>
   </ul>
</div>

注意：“items”是搜索结果列表，有效！结果终于出来了。

我知道你可以在“<input>”中加入一个（keyup）函数，但是它应该如何在结果框列表中标记特定的li元素呢？ 我的想法类似于索引计数器。例如，当索引计数器为 3 时，则应将第三个 li 元素与“searchIndex”类一起添加，从而为 li 元素赋予新的颜色。

但我不知道该怎么做。你有解决办法吗？或者您有更好的解决方案来解决这个问题吗？

我希望你能帮助我。

Answer 1

<input (keyup)="selected--" (keydown)="selected++">

<div>
   <ul>
     <li *ngFor="#item of items; #i=index" [class.selected]="i == selected">{{ item.text }}</li>
   </ul>
</div>

您需要对selected < 0 或selected >= numResult 进行一些特殊处理，但是当您使用事件处理函数而不是内联--/++ 时，这应该很容易。我想你明白了。

更新（回答评论中的问题）

只是一个小问题：当我将鼠标悬停在列表上时，你知道如何删除“selected”css 属性吗？我希望它像在 Google 中一样：当您使用 keyUp 和 keyDown 时，索引会被标记。但是，当您将鼠标悬停在它上面时，应该删除所选内容，并且只有鼠标悬停应该处于活动状态

<div>
   <ul (mouseover)="mouseover=true"
       (mouseout)="mouseover=false">
     <li *ngFor="#item of items; #i=index" 
         [class.selected]="i == selected && !mouseover">{{ item.text }}</li>
   </ul>
</div>

将此字段添加到组件中

mouseover:boolean = false;