javascript - 使用 keyup.arrowDown 和 keyup.arrowUp 导航列表

Question

我正在尝试使用 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>

我是新手，任何帮助都将不胜感激。谢谢

标签： javascripthtmlangulartypescript

Answer 1

工作！

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