将第一个索引聚焦在弹出菜单上，并使用箭头键滚动弹出菜单项

Question

我有另一个组件的按钮，单击此弹出窗口后将显示。我希望我的第一个li标签被突出显示并集中显示的弹出窗口，并且我希望能够使用箭头键滚动显示突出显示的项目

到目前为止，这是我弹出框组件的进度

https://stackblitz.com/edit/angular-ivy-4bfjkg?file=src%2Fapp%2Fapp.component.html

这是我的html文件

<div class="popup__list">
  <ul
    class="popup__list-item p-2"
    *ngFor="let a of listing; let i = index"
  >
    <li style="list-style:none" #list tabindex="-1" [ngClass]="{'selected' : i == 0}">
      {{ a?.FirstName }} {{ a?.LastName }}
    </li>
  </ul>
</div>

这是我的.ts文件

@ViewChild('list') list;



listing = [
    {
      FirstName: 'Jon',
      LastName: 'Doe'
    },
    {
      FirstName: 'Jon1',
      LastName: 'Doe1'
    },
    {
      FirstName: 'Jon2',
      LastName: 'Doe2'
    },
    {
      FirstName: 'Jon3',
      LastName: 'Doe3'
    },
    {
      FirstName: 'Jon4',
      LastName: 'Doe4'
    },
    {
      FirstName: 'Jon5',
      LastName: 'Doe5'
    },
    {
      FirstName: 'Jon6',
      LastName: 'Doe6'
    },
    {
      FirstName: 'Jon7',
      LastName: 'Doe7'
    },
    {
      FirstName: 'Jon8',
      LastName: 'Doe8'
    }
  ];



    ngAfterViewInit() {
        setTimeout(() => {
          this.list.nativeElement.focus();
        });
  }

这是我的css文件，用于在选择时更改颜色

.popup__list {
 height: 200px;
  width: 200px;
  border: 1px solid red;
  overflow: auto;
}

.popup__list-item {
  background-color: ;
}

li {
list-style: none;  
}

.selected {
  background-color: salmon;
}