如何在"Angular2 for TypeScript"(测试版)中获取li-Element以添加特定的CSS类？

Question

在我的Angular2项目中,我正在尝试使用像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时,则应该使用类"searchIndex"添加第三个li元素,这将给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但是当你用一个事件处理函数,而不是内联的,因此很容易--/ ++.我想你明白了.

更新(回答评论中的问题)

只是一个小问题:当我将鼠标悬停在列表上时,你知道如何删除"选中"的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;