Javascript 如何使用9键选择下拉值

当前场景是这样的：一个包含多个选项的下拉列表

 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>

---

当下拉列表关闭时，它会工作。如果下拉列表打开，则不会填充this.keypressed的值

对于简单的matSelect，您可以使用与[ngModel]混合的keydown事件来执行此操作：

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();
    }
  }
}

这是

当然，必须通过鼠标单击或键盘上的制表来聚焦选择

97是ASCII表中数字1的ASCII代码

---

我试着用formControl来做，但无法在html中更新所选的值。如果您知道如何使用它，那么如果您需要它，您可以在表单中使用它。

您尝试过什么吗？我尝试过使用@HostListener'window:keydown'、['$event']，但不起作用这应该是您的问题，而不是在评论中。您还应该包括侦听器函数的主体，并解释您所说的“不起作用”是什么意思。此行为实际上应该是浏览器固有的，而不需要任何额外的事件绑定。你能在stackblitz中发布更多的代码或复制吗？

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>