我们如何在按下 tab 键时选择 mat 选项?,它应该像 mat-autocomplete angular 6 中的输入按钮一样工作 [英] How can we select mat option when press on tab key?, it should work like enter button in mat-autocomplete angular 6
本文介绍了我们如何在按下 tab 键时选择 mat 选项?,它应该像 mat-autocomplete angular 6 中的输入按钮一样工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我们如何在按下 tab 键时选择 mat 选项?,它应该像 mat-autocomplete angular 6 中的输入按钮一样工作......在下面的 URL 中,按 Enter 时它可以工作,但是每当我们按 Tab 按钮时,它都应该选择突出显示的选项.
How can we select mat option when press on tab key?, it should work like enter button in mat-autocomplete angular 6... In below URL its working when press enter, but whenever we press tab button it should select highlighted option.
<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
You can subscribe to this.autoTrigger.panelClosingActions, see stackblitz
如果你的 .html 是这样的
If your .html is like
<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)
}
} )
}
更新这个答案
这篇关于我们如何在按下 tab 键时选择 mat 选项?,它应该像 mat-autocomplete angular 6 中的输入按钮一样工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文