[英]How can we select mat option when press on tab key?, it should work like enter button in 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... In below URL its working when press enter, but whenever we press tab button it should select highlighted option. 按下Tab键时如何选择垫选项?它的工作方式类似于垫自动完成角度6中的Enter键...在下面的URL中,按下Enter时它的工作方式,但是每当我们按下Tab键时,它都应该选择突出显示的选项。
<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>
You can subscribe to this.autoTrigger.panelClosingActions, see stackblitz 您可以订阅this.autoTrigger.panelClosingActions,请参阅stackblitz
If your .html is like 如果您的.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>
In your .ts 在您的.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)
}
} )
}
Update a better aproach (using a directive) in this answer 在此答案中 更新更好的方法(使用指令)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.