如何使用按键 select 下拉值 angular 9

Question

当前情况是下拉列表包含多个选项。

 value: Values[] = [
    { value: '1', viewValue: '1' },
    { value: '2', viewValue: '2' },
    { value: '3', viewValue: '3' }
  ];`



<select formControlName="item">
    <option *ngFor="let i of foods" [value]="i.value">{{i.value}}</option>
  </select>

要求是如果我在键盘上点击1，那么选项1需要selected。我试过使用 @HostListener('window:keydown', ['$event']) 但没有用。有没有可以使用的例子。？如何 select 使用键盘输入的选项。??

监听器的示例代码如下。

 @HostListener('window:keydown', ['$event'])
 handleKeyboardEvent(event: KeyboardEvent) {
 this.keypressed = event.keyCode;
 console.log('this.keypressed', this.keypressed)
 }

下拉关闭时有效。如果打开下拉菜单，则 this.keypressed 的值不会被填充

Answer 1

对于简单的 matSelect，您可以使用 (keydown) 事件与 [(ngModel)] 混合使用：

import {
  Component,
} from "@angular/core";
import { MatSelect } from "@angular/material/select";

interface Food {
  value: string;
  viewValue: string;
}

/**
 * @title Basic select
 */
@Component({
  selector: "select-overview-example",
  templateUrl: "select-overview-example.html",
  styleUrls: ["select-overview-example.css"]
})
export class SelectOverviewExample {
  foods: Food[] = [
    { value: "steak-0", viewValue: "Steak" },
    { value: "pizza-1", viewValue: "Pizza" },
    { value: "tacos-2", viewValue: "Tacos" }
  ];
  firstSelect = this.foods[2].value;

  onKeyPressed(event: KeyboardEvent, mySelect: MatSelect) {
    if (event.keyCode - 97 >= 0 && event.keyCode - 97 <= 2) {
      this.firstSelect = this.foods[event.keyCode - 97].value;
      mySelect.close();
    }
  }
}

<h4>Basic mat-select</h4>
<mat-form-field appearance="fill">
  <mat-label>Favorite food</mat-label>
  <mat-select #mySelect [(ngModel)]="firstSelect" (keydown)="onKeyPressed($event, mySelect)">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

这里是the repro on Stackblitz.

当然 select 必须聚焦，可以通过鼠标单击或通过键盘上的制表来实现。

97是ASCIItable.

中数字1的ASCII码

我尝试用 formControl 来做，但无法更新 html 中的 selected 值。如果您知道如何操作，那么您可以在需要时以表格形式使用它。

如何使用按键 select 下拉值 angular 9

how to select the dropdown value using key press angular 9

javascript

drop-down-menu

angular-material

angular

angular9