我们如何在按下 Tab 键时 select mat 选项?它应该像 mat-autocomplete angular 中的 enter 按钮一样工作 6
How can we select mat option when press on tab key?, it should work like enter button in mat-autocomplete angular 6
我们如何在按下 Tab 键时 select mat 选项?它应该像 mat-autocomplete 中的 enter 按钮一样工作 angular 6...
在下面 URL 它在按下 enter 时工作,但每当我们按下 tab 按钮时它应该 select 突出显示选项。
<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)
}
} )
}
Update
中更好的方法(使用指令)
我们如何在按下 Tab 键时 select mat 选项?它应该像 mat-autocomplete 中的 enter 按钮一样工作 angular 6... 在下面 URL 它在按下 enter 时工作,但每当我们按下 tab 按钮时它应该 select 突出显示选项。
<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)
}
} )
}
Update