javascript - 按下tab键时如何选择mat选项?,它应该像mat-autocomplete angular 6中的输入按钮一样工作
问题描述
我们如何在按下 tab 键时选择 mat 选项?它应该像 mat-autocomplete angular 6 中的 enter 按钮一样工作......
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
解决方案
你可以订阅 this.autoTrigger.panelClosingActions,见stackblitz
如果你的 .html 就像
<mat-form-field class="example-full-width">
<!--see the reference variable-->
<input #typehead type="text" ...>
<mat-autocomplete #auto="matAutocomplete">
...
</mat-autocomplete>
</mat-form-field>
在你的 .ts
@ViewChild( 'typehead', {read:MatAutocompleteTrigger}) autoTrigger: MatAutocompleteTrigger;
ngAfterViewInit()
{
this.autoTrigger.panelClosingActions.subscribe( x =>{
if (this.autoTrigger.activeOption)
{
console.log(this.autoTrigger.activeOption.value)
this.myControl.setValue(this.autoTrigger.activeOption.value)
}
} )
}
在此答案中更新更好的方法(使用指令)
推荐阅读
- import - tflite_runtime interpreter.py" "" 已注册!在 Windows 10 上
- python - 在python中使用'不等于'和if语句
- blockchain - 将需要在同一交易中恢复在单独合约中所做的存储更改 - Solidity
- flutter - 我的 API ROUTE 的 Flutter / Dart http 请求获取方法未在正文中返回响应
- azure - 使用自定义连接器的逻辑应用程序:逻辑应用程序触发器中的下拉菜单中显示的先前选择的值
- vagrant - Github 操作作业将目录结构递归为工作目录?
- python - 在python中,什么是“变量,=”?
- azure - azure 函数代码在第一个 azure 函数中记录信息,而不在另一个 azure 函数中记录
- python - Python/Opencv - 在单个窗口中显示多个视频源
- javascript - 在 WooCommerce Checkout 上放置产品数量输入字段