Блог

Главная - Вопросы по программированию - навигация по списку с помощью keyup.ArrowDown и keyup.ArrowUp

навигация по списку с помощью keyup.ArrowDown и keyup.ArrowUp

#javascript #html #angular #typescript

#javascript #HTML #угловой #typescript

Вопрос:

Я пытаюсь перемещаться по списку в моем угловом компоненте, используя keyup.ArrowDown и keyup.ArrowUp. Я не уверен, как использовать индекс, чтобы иметь возможность это сделать, вот что я должен сделать до сих пор.

 public nextActiveMatch(): void {
        this.activeIndex = this.activeIndex < this.list.length - 1 ?   this.activeIndex : this.activeIndex;
    }
    public prevActiveMatch(): void {
        this.activeIndex = this.activeIndex > 0 ? --this.activeIndex : 0;
    } 
   <div class="selection-list-standard" *ngIf="showList">
    <div class="selection-list">
      <div
        class="select-row"
        *ngFor="let item of list | appFilter: searchText; let i = index"
        (click)="itemClicked(item)"
      >
        <span
          [ngClass]="{ displayAnEllipsis: shouldDisplayAnEllipsis() }"
          (keyup.arrowUp)="prevActiveMatch()"
          (keyup.arrowDown)="nextActiveMatch()"
          )
        >
          {{ item }}</span
        >
      </div>
    </div>
  </div>

Я новичок в этом, любая помощь будет действительно оценена. Спасибо

Ответ №1:

сработало!

 (keyup.arrowDown)="nextActiveMatch()"
    (keyup.arrowUp)="prevActiveMatch()"