Angular 7 如何在使用箭头键通过键盘“拖放”时保持对元素的关注向上箭头工作一次，然后失去焦点

问题描述

使用符合 508 标准的 Angular 7 通过键盘重新排序表格。为了可访问性，我需要能够通过键盘重新排列项目的顺序。因此，如果我有项目 (1,2,3) 并且用户想要将顺序更改为 (3,1,2) 他们需要能够使用箭头键这样做。

在表格中，每行的第一个单元格是一个可点击的手柄，用于拖放行以更改顺序。如果我使用键盘将焦点切换到该元素，那么我需要能够在焦点位于该手柄上时使用向上或向下箭头更改项目的顺序。

预期结果：用户将使用 TAB 键导航到拖放手柄。从那里他们将使用向上或向下箭头键来更改表项的索引号。这将允许他们在保存项目顺序之前通过键盘选择表格中项目的顺序。

问题：使用箭头键和下面的代码时，向下箭头键按预期工作。但是向上箭头键只能使用一次。单击向上后，它会正确移动项目，但会失去手柄的焦点。我需要一种方法来保持拖放手柄的焦点，以便用户可以选择表格中项目的顺序。

ts：

arrowUpEvent(index: number) {
  if (index !== 0) {
    const upperItem = this.movedItem[index - 1];
    this.movedItem[index - 1] = this.movedItem[index];
    this.movedItem[index] = upperItem;
  }
}

 arrowDownEvent(index: number) {
  if (index !== this.movedItem.length) {
    const lowerItem = this.movedItem[index + 1];
    this.movedItem[index + 1] = this.movedItem[index];
    this.movedItem[index] = lowerItem;
  }
}

html：

<tr [pReorderableRow]="index">
   <th scope="row" class="customized-table-th" *ngIf="!this.readOnlyAccess">
      <a target="_self" rel="noopener noreferrer" href="#"
        (keydown.arrowdown)="arrowDownEvent(index)" 
        (keydown.arrowup)="arrowUpEvent(index)"
        onclick="return false;" style="color:black;">
         <i class="fa fa-bars" pReorderableRowHandle></i>
      </a>
   </th>
</tr>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular section508