如何在 Angular 11 中使用 ArrowDown 和 ArrowUp 键滚动列表

Question

我正在尝试创建一个自定义选择框，但正在寻找一种更简洁的方式来使用 ArrowDown 和 ArrowUp 键选择下拉列表，

<div class="custom-select">
    <input 
      type="text" 
      placeholder="User Name.." 
      [(ngModel)]="userName" 
      (keydown)="keyDown($event)">
      <div class="dropdown">
        <span 
          *ngFor="let user of users; let i = index" 
          [class.active]="i == selectedValue"
          (click)="getUser(user.name)">
          {{user.name}}
        </span>
      </div>
    </div>

使用 keyDown($event) 方法，我正在尝试实现相同的方法，但是，我无法传递 scroll，而且我不确定是否可以使用 scroll into view 指令

  users: Array<any> =  [];
  userName:string = "";
  selectedValue:number = 0;
  
    ngOnInit(): void {
      this.http.get<any>('http://jsonplaceholder.typicode.com/users')
        .subscribe(response =>{
          this.users = response;
          console.log('users --->', this.users)
      });
   }

   getUser(user:string){
      this.userName = user;
   }

   keyDown(event:any){
    if(event.key === 'ArrowDown'){
      this.selectedValue++;
    } else if(event.key === 'ArrowUp'){
      this.selectedValue--;
    }
  }