typescript 如何在Angular 嵌套列表中使用向上和向下键导航

rqdpfwrv  于 2023-01-14  发布在  TypeScript
关注(0)|答案(1)|浏览(117)

我尝试在两个不同的列表中实现向下箭头和向上箭头,而其中一个列表中有子列表。我有两个无序列表,其中一个列表中有另一个ngFor在其子列表(嵌套列表)上运行。

<input (keyup)="keyDown($event)"/>
<div>
  <h4>Filters Names</h4>
  <ul>
    <li *ngFor="let filter of filters; let i = index;" [class.activeSearchLink]="i === linkIndex"> 
     {{filter.name}}
        <div *ngFor="let subFilter of filter.subFilters">
           {{subFilter.name}}
        </div>
    </li>
</ul>
<h4>Filters Values</h4>
<ul>
  <li *ngFor="let value of filters.values; let i = index;"[class.activeSearchLink]="i=== linkIndex"> 
    {{item.name}}
   </li>
 </ul>
 </div>

代码:

keyDown(event) {
  switch (event.keyCode) {
      case 38: 
                this.linkIndex--;
              break;
      case 40: 
                this.linkIndex++;
              break;

  }
}

相关问题