按下Tab键时如何选择垫子选项?它的工作方式类似于垫子自动完成角度6中的输入按钮 [英] How can we select mat option when press on tab key?, it should work like enter button in mat-autocomplete angular 6

问题描述

按Tab键时如何选择垫子选项?它的工作原理类似于垫子自动完成角度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，请参阅

You can subscribe to this.autoTrigger.panelClosingActions, see 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)
      }
    } )
  }

更新(使用指令)在 查看全文