如何在“ 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>

注意：“项目”是搜索结果列表，有效！ 结果终于显现出来。

我知道您可以在“ <input> ”中添加一个（键）函数，但是应如何在结果框列表中标记特定的锂元素？ 我的想法有点像索引计数器。 例如，当索引计数器为3时，应在第三个锂元素上添加“ searchIndex”类，从而为锂元素赋予新的颜色。

但是我不知道该怎么做。 您有解决方案吗？ 还是您有更好的解决方案来解决这个问题？

我希望你能帮助我。

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进行一些特殊处理，但是当您使用事件处理函数而不是内联-- / ++时，这应该很容易。 我想你明白了。

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

只是一个小问题：当我将鼠标悬停在列表上时，您知道如何删除“选定的” 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;