![](/img/trans.png)
[英]Angular 6: how to access ALL option values in mat-autocomplete dropdown?
[英]How can we select mat option when press on tab key?, it should work like enter button in mat-autocomplete angular 6
按下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>
您可以訂閱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)
}
} )
}
在此答案中 更新更好的方法(使用指令)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.