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