如何在 Ng Select DropDown 上触发按键事件 - 在代码隐藏中获取 ng select 面板

Question

我正在使用 ng select： https://www.npmjs.com/package/@ng-select/ng-select

堆栈闪电战： https://stackblitz.com/edit/angular-rvo39c?file=src%2Fforms-with-options-example.component.ts

我希望能够使用箭头 UP 或 DOWN 突出显示 Listbox 中的对象，然后在按下箭头 [=] 时突出显示的项目 selected 16=] 或 LEFT.

我尝试使用事件 keydownInDropdown 和事件 onDropDownChange 来做到这一点。 keydownInDropdown在 onDropDownChange.

之前被解雇

另一个适合我的解决方案：使用箭头 UP 或 DOWN 突出显示 Listbox 中的对象，然后在第一次单击 enter 时 select 该对象。第二次单击 enter 如果没有更改，下拉菜单应该关闭。

Answer 1

经过一整天的工作，得出了以下解决方案。当您在 selecting 选项时单击向右或向左箭头键时，它将被 selected。（您可以在您的 stackblitz 中替换整个代码。我为单个 select 制作了它，您也可以制作多 select 根据您的要求。）

component.html代码

<form [formGroup]="heroForm" novalidate>
<div class="form-row">
    <div class="form-group col-md-6">
      <ng-select [virtualScroll]="false" [multiple]="false"  [keyDownFn]="keydownInDropdown" 
       (keydown)="makeChoice($event)" #ngSelect
      > // taking its reference by #ngSelect & calling "makeChoice" method when any keyboard clicks are happening.
     // there is no need of ngModel so i removed it from the code.

          <ng-option *ngFor="let car of cars" [value]="car.id" 

          >{{car.name}}</ng-option>
          <ng-option [value]="'custom'">Custom</ng-option>
      </ng-select>
      <br/>Selected car ID: {{selectedCars | json}}

    </div>

</div>

component.ts代码

import { Component, OnInit,ElementRef,HostListener,ViewChildren } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'forms-with-options-example',
  templateUrl: './forms-with-options-example.component.html',
  styleUrls: ['./forms-with-options-example.component.scss']
})
export class FormsWithOptionsExampleComponent implements OnInit {

  constructor(
      private fb: FormBuilder,private el:ElementRef) {
  }


  @ViewChildren('ngSelect') ngSelect:ElementRef;

  selectedCars = [3];
  cars = [
   { id: 1, name: 'Volvo' },
   { id: 2, name: 'Saab' },
   { id: 3, name: 'Opel' },
   { id: 4, name: 'Audi' },
  ];

  keydownInDropdown(event)
   {
     if (event.keyCode == 13)
     {
       // set highlighted value as selected value. (default)
       console.log(event);
     }

     if (event.keyCode == 37 || event.keyCode == 39)
     {
       // set highlighted value as selected value.
       console.log(event);
     }
     // console.log("keydown is ",event)
   }
   ngOnInit() {

   }


   makeChoice(e) {

      if(e.key==='ArrowRight' || e.key==='ArrowLeft') {

        var totalOptions = this.ngSelect["first"].dropdownPanel.contentElementRef.nativeElement.children;
        console.log("total opetions are ",totalOptions);
        var i;

        for(i=0;i<totalOptions.length;i++) {

            if(totalOptions[i].classList.value.includes('ng-option-marked')) {
             // console.log("selected index is ",i);
             this.selectedCars = i;
             totalOptions[i].click();

            }
         }

      }
   } 
}

如何在 Ng Select DropDown 上触发按键事件 - 在代码隐藏中获取 ng select 面板

How to trigger keydown events on Ng Select DropDown - Get ng select panel in code behind

angular-ngselect

angular