Question

我想在用户按下任何键时在打字稿中执行功能。例如，如果下拉列表包含诸如“ Apple”，“ Pineapple”，“ Mango”之类的值，并且如果用户按“ M”，则应按照标准HTML行为将焦点集中在“ Mango”上。的标准HTML行为是：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

我已将（keypress）添加到html代码中的mat-select中。但是似乎按键不起作用，因为打字稿功能中的代码未得到执行。角版本为4。

下面是角度代码：

<mat-form-field>
    <mat-select (keypress)="selectKeyPress($event)" placeholder="State" formControlName = "state" required id="stateDrop">
        <ng-container *ngFor = "let item of stateList">
            <mat-option [value] = "item.stateId">{{item.name}}</mat-option> 
        </ng-container>
    </mat-select>
    <mat-error *ngIf="(form.controls['state'].invalid && form.controls['state'].touched)">You must select a state.</mat-error>
</mat-form-field>

Answer 1

我已经搜索过您的问题，但是更好的方法是使用自动完成功能。 https://material.angular.io/components/autocomplete/overview

参考链接：Using keyboard to select items in md-select

Answer 2

尝试一下，为我工作

angular.element(document).find('input').on('keydown', function (ev) {
    ev.stopPropagation();
});

如果以上代码不起作用，请在输入中使用此代码

ng-keydown="$event.stopPropagation()"

Answer 3

我们遇到的情况是，某些元素在某些方面不是开箱即用的。所以实际上这是mat-selects的默认行为。但是在我们的案例中，“材质主题”有时会覆盖从MatSelectModule注入的样式，在某些情况下反之亦然，这导致字体大小有时为14px，有时为16px。当它是16像素（来自默认的“材质主题”）时，很明显中断了当前跳转到的选项所在位置的计算，所选内容跳到了实际项目上的一点。因此，我们最后重写主题也总是使用14px（subheading-2是mat-option-typography mixin中使用的config属性）。您可以尝试使用调试器来覆盖字体大小，直到选择了正确的元素为止。这里的代码修改了垫子选项的字体大小：

$mat-option-typography: mat-typography-config(
  $font-family: 'Roboto, sans-serif',
  $subheading-2: mat-typography-level(14px, 24px, 500)
);
@include mat-option-typography($mat-option-typography);

为什么按键不能在垫选中工作？

3 个答案: