html - Hur kan jag få li-elementet i "Angular2 för TypeScript" (beta) för att lägga till en specifik CSS-klass?

I mitt Angular2-projekt försöker jag implementera en sökruta med en resultatlåda som visas som i Google. Det är vad jag har fått och det fungerar, men tyvärr när man söker något och trycker på "pil ned" eller "pil upp" så markeras inte sökresultatet i resultatlådan som i Google.

Det är min kod:

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

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

Obs: "items" är sökresultatslistan, som fungerar! Resultaten visas äntligen.

Jag vet att du kan lägga in "<input>" en (keyup)-funktion, men hur ska den markera det specifika li-elementet i resultatrutan? Min idé var något som en indexräknare. När indexräknaren till exempel är 3, bör det tredje li-elementet läggas till med klassen "searchIndex", vilket ger li-elementet ny färg.

Men jag har ingen aning om hur jag ska göra det. Har du en lösning på hur man gör det? Eller har du en bättre lösning för att lösa det?

Jag hoppas att du kan hjälpa mig.

Svar #1

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

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

Du behöver någon speciell hantering för selected < 0 eller selected >= numResult men det borde vara enkelt när du använder en händelsehanteringsfunktion istället för inline --/++. Jag antar att du förstår idén.

Uppdatering (för att svara på en fråga från kommentaren)

Bara en liten fråga: När jag hovrar musen över listan, vet du hur man tar bort css-egenskapen "selected"? Jag vill ha det som i Google: När du använder upp- och nedpilen markeras indexet. Men när du hovrar musen över det, ska den valda tas bort och bara musens hover ska vara aktiv.

<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>

Lägg till detta fält i komponenten

mouseover:boolean = false;