首页 文章

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

提问于
浏览
0

嘿伙计我有一个简单的 <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>

现在这是我的问题:如果用户选择了一个选项并按下回车键,则会扩展 <mat-select> 表单并再次显示所有选项 . 有没有办法禁用这种行为?

我试图在onkeydown事件中添加像 $event.stopPropagation(); 之类的东西,但它没有成功 .

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

谁能帮忙?最好的祝福

1 回答

  • 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存储库上打开一个问题,并要求一种方法来阻止选项扩展 .

相关问题