Как мы можем выбрать опцию мат при нажатии на клавишу табуляции? Она должна работать как кнопка ввода в угловом автозаполнении 6 - PullRequest
Новая
       47

Как мы можем выбрать опцию мат при нажатии на клавишу табуляции? Она должна работать как кнопка ввода в угловом автозаполнении 6

2 голосов
/ 08 марта 2019

Как мы можем выбрать опцию мат при нажатии на клавишу табуляции? Она должна работать как кнопка ввода в угловом автозаполнении 6 ... В приведенном ниже URL он работает, когда нажимаете ввод, но всякий раз, когда мы нажимаем кнопку табуляции, он должен выбрать выделенную опцию. 

<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>

Демо

1 Ответ

5 голосов
/ 08 марта 2019

Вы можете подписаться на 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)
      }
    } )
  }

Обновление лучший подход (с использованием директивы) в этот ответ

...