Question

嘿伙计我确实有一个简单的mat表单，用户可以在这三个选项中进行选择。如果用户选择了一个选项并按下回车键，则应触发搜索按钮。到目前为止，下面的代码一切正常：

<mat-select>

现在这是我的问题：如果用户选择了一个选项并按下回车键，则展开<mat-input-container> <mat-select onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click();> <mat-option> Option 1 </mat-option> <mat-option> Option 2 </mat-option> <mat-option> Option 3 </mat-option> </mat-select> </mat-input-container> <button mat-button id="btnSearch" (click)="search()">Search</button>表单并再次显示所有选项。有没有办法禁用这种行为？

我尝试在onkeydown事件中添加类似<mat-select>的内容，但它没有用完。

我在这里找到了非常相似的问题Is there a way to change this Angular 4+ Material Design Mat-Select default behavior? 但它没有解决我的问题

有谁可以提供帮助？最好的问候

Answer 1

首发提示：您可以替换此

<mat-select 
  onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click();>

有了这个：

<mat-select (keyup.enter)="document.getElementById('btnSearch').click();>

这是您在Angular中检测输入键的方法。

此外，由于您使用的是Angular，因此您可以访问本地变量。这意味着你可以（但更重要的是，你应该）这样做：

<mat-select (keyup.enter)="search.click();>
<button #search mat-button id="btnSearch" (click)="search()">Search</button>

现在，关于你的问题，我也遇到了它，从来没有能够解决它。但是，你应该做的是在他们的Github存储库上打开一个问题，并要求一种方法来阻止选项扩展。

Answer 2

您可以使用它来防止选中Enter键时下拉菜单选项的扩展。我遇到了同样的问题，并使用了mat-select中的以下代码解决了这个问题。

<mat-select
(keydown.enter)="$event.stopImmediatePropagation();" >

参考您的代码而不是使用

onkeydown="if (event.keyCode == 13)
    document.getElementById('btnSearch').click(); this in `mat-select`.

使用以下代码。

<mat-input-container>
 <mat-select (keydown.enter)="$event.stopImmediatePropagation();">
  <mat-option>
   Option 1
  </mat-option>
  <mat-option>
   Option 2
  </mat-option>
  <mat-option>
   Option 3
  </mat-option>
 </mat-select>
</mat-input-container>
<button mat-button id="btnSearch" (click)="search()">Search</button>

更改Angular Material Design <mat-select>的默认行为

2 个答案: