Angular中使用上下方向键导航mat table绑定的IOrder数组元素求助

修复方案 #

现有代码存在3个核心问题：未阻止浏览器默认滚动行为、无索引边界校验、缺少索引初始值。按以下内容修改即可实现预期效果：

1. TS代码修改

// 组件属性定义处补充初始化
linkIndex: number = -1;
orderItems: IOrder[] = []; // 保留你原有IOrder类型定义即可

navigateUsingKey(event: KeyboardEvent) {
  // 阻止浏览器默认的上下键滚动页面行为
  event.preventDefault();

  switch (event.keyCode) {
    case 38: // 上方向键
      if (this.linkIndex > 0) {
        this.linkIndex--;
      }
      break;
    case 40: // 下方向键
      if (this.linkIndex < this.orderItems.length - 1) {
        this.linkIndex++;
      }
      break;
  }
}

2. HTML代码（仅需确认绑定逻辑正确，无需大幅修改）

<div>
    <input (keyup)="navigateUsingKey($event)"/>
    <div *ngFor="let orderItem of orderItems; let i = index;">
        <div [class.activeSearchLink]="i === linkIndex">{{orderItem.name}}</div>  
    </div>
</div>

3. 可选补充：确保高亮样式生效

如果还未定义选中态样式，可在组件css中添加：

.activeSearchLink {
  background-color: #e6f7ff;
  color: #1890ff;
}

如果需要支持按回车选中当前聚焦项，可在switch中新增case 13分支处理选中逻辑即可。

内容的提问来源于stack exchange，提问作者Gamze Burçin Aydın