Навигация по многостраничному списку с помощью клавиш со стрелками вверх / вниз с помощью Angular 8

Question

Я пытался создать автозаполнение, используя несколько "ul". Эти элементы списка должны перемещаться с помощью клавиш со стрелками вверх / вниз, но не уверены, что будет лучшим способом добиться этого с помощью Angular. Я попытался немного поработать с * ngFor, но это работает только для одного "ul" с "li". Вот блик стека с моим кодом, но у него есть некоторые проблемы.

https://stackblitz.com/edit/angular-urnur5

//Code to handle navigation
navigateUsingKey(event) {
      switch (event.keyCode) {
          case 38: // this is the ascii of arrow up
                    this.linkIndex--;
                  break;
          case 40: // this is the ascii of arrow down
                    this.linkIndex++;
                  break;

      }
  }

Здесь html для того же.

<input (keyup)="navigateUsingKey($event)"/>
<div>
  <h4>Fruit</h4>
  <ul>
    <li *ngFor="let item of list1; let i = index;" [class.activeSearchLink]="i === linkIndex"> {{item.name}}</li>
  </ul>
  <h4>Vegie</h4>
  <ul>
    <li *ngFor="let item of list2; let i = index;" [class.activeSearchLink]="i === linkIndex"> {{item.name}}</li>
  </ul>
  <h4>Phone</h4>
  <ul>
    <li *ngFor="let item of list3; let i = index;" [class.activeSearchLink]="i === linkIndex"> {{item.name}}</li>
  </ul>
</div>

Answer 1

Рабочая демонстрация в этом StackBlitz Link

вам необходимо проверить раздел и длину каждого раздела .. так, чтобы вы достигли конца или начала изменения раздела Обход раздела в это время и изменение индекса в соответствии с этим.

navigateUsingKey(event) {
  switch (event.keyCode) {
      case 38: // this is the ascii of arrow up        
        this.linkIndex === -1 ?  this.linkIndex = 0 : this.linkIndex-- ;
        // each section traversal...
        if(this.currentSectionIndex === 0){
          this.downTraverse(2,this.list3.length);
        } else if(this.currentSectionIndex === 2){
          this.downTraverse(1, this.list2.length);
        } else if(this.currentSectionIndex === 1){
          this.downTraverse(0, this.list1.length)
        }
      break;

      case 40: // this is the ascii of arrow down
        if(this.currentSectionIndex === 0){
          this.upTraverse(1, this.list1.length);
        } else if(this.currentSectionIndex === 1){
            this.upTraverse(2, this.list2.length);
        } else if(this.currentSectionIndex === 2){
            this.upTraverse(0, this.list3.length);
        }
        this.linkIndex++;
      break;       
  }
}

downTraverse(sectionIndex:number, listLength){
// calls when DOWN key press...
  this.linkIndex === -1 ? (this.currentSectionIndex = sectionIndex, this.linkIndex = listLength - 1) : '';
}
upTraverse(sectionIndex: number, listLength: number){
  // calls when UP key press...
  listLength-1 <= this.linkIndex ? (this.currentSectionIndex = sectionIndex, this.linkIndex = -1) : '';
}

Файл шаблона

<input (keyup)="navigateUsingKey($event)"/>
<hr>
  <h5> You are in :   {{currentSectionIndex}} section
<hr>
<div>
  <h4 [ngClass]="{'section-color' : currentSectionIndex === 0}">Fruit </h4>
  <ul>
     <li *ngFor="let item of list1; let i = index;" [class.activeSearchLink]="i === linkIndex && currentSectionIndex === 0"> {{item.name}} 
     </li>
  </ul>
  <h4 [ngClass]="{'section-color' : currentSectionIndex === 1}">Vegie</h4>
  <ul>
     <li *ngFor="let item of list2; let i = index;" [class.activeSearchLink]="i === linkIndex && currentSectionIndex === 1"> {{item.name}}
    </li>
 </ul>
 <h4 [ngClass]="{'section-color' : currentSectionIndex === 2}">Phone</h4>
 <ul>
    <li *ngFor="let item of list3; let i = index;" [class.activeSearchLink]="i === linkIndex && currentSectionIndex === 2"> {{item.name}}
    </li>
 </ul>
</div>