使用 Angular 8 使用向上/向下箭頭鍵導航多列表

Question

我一直在嘗試使用幾個“ul”來構建自動完成功能。 這些列表項應該可以使用向上/向下箭頭鍵導航，但不確定使用 Angular 實現該目標的最佳方法是什么。 我嘗試了使用 *ngFor 的一些解決方法，但這只適用於一個帶有“li”的“ul”。 這是我的代碼的堆棧閃電戰，但它有一些問題。

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 鏈接中的工作演示

您需要檢查每個部分的部分和長度..以便當您到達部分更改部分遍歷的結束或開始時並據此更改索引。

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>