按 T​​ab 键时我们如何选择 mat 选项？，它应该像 mat-autocomplete Angular 6 中的输入按钮一样工作

按下 Tab 键时我们如何选择 mat 选项？，它应该像 mat-autocomplete Angular 6 中的输入按钮一样工作... 在下面的 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>

Demo https://stackblitz.com/angular/rdgjgqdggbg?file=app%2Fautocomplete-simple-example.ts

您可以订阅this.autoTrigger.panelClosingActions，参见堆栈闪电战 https://stackblitz.com/edit/angular-6hxbij?file=app%2Fautocomplete-simple-example.ts

如果你的 .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更好的方法（使用指令）这个答案 https://stackoverflow.com/questions/55156541/how-to-make-tab-key-as-enter-key-in-angular-material/55159386#55159386