Реализация метода openPanel () в MatAutocompleteTrigger

Question

Я пытаюсь открыть панель предложений для события keyup.ArrowDown.Если кнопка со стрелкой вниз нажата, то я хочу отобразить все значения на панели автоматического предложения

Вот мой пример кода.Я нашел различные примеры этого метода на SO, но ни один из них не работает в моем сценарии.

 <form class="declarationType">
  <mat-form-field class="example-full-width">
    <input matInput aria-label="State" [matAutocomplete]="auto" [formControl]="typeCtrl" (keyup.ArrowDown)="openAutocomplete($event)">
    <mat-autocomplete #auto="matAutocomplete" [panelWidth]="700" >
      <mat-option  *ngFor="let type of declarationTypes$ | async" [value]="type.value" class="comboBox" >
        <span>{{type.value}}</span> |
        <small>{{type.declarationTypeCodeDescription}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  </form>

 @ViewChild(MatAutocompleteTrigger) inputAutoComplit: MatAutocompleteTrigger;
......
 openAutocomplete() {
    setTimeout(() => {
      this.inputAutoComplit.openPanel();
    }, 0);
  }

Answer 1

Проблема с вашим подходом заключается в том, что input должен быть сфокусирован на (keyup.ArrowDown) для запуска ... если вы думаете об этом, автозаполнение уже открывается, когда вы щелкаете внутри input и побеждает цельиспользование (keyup.ArrowDown).

Следующее будет работать только после того, как вы щелкнете внутри input, после чего откроется autoComplete, а затем нажмите ArrowDown.

openAutocomplete() {
    console.log('ArrowDown Clicked')
  }

То, что вы ищете, это слушатель на уровне документа для ArrowDown, который откроет autoComplete без input, имеющего фокус.

Получите ссылку на MatAutocompleteTrigger

import { MatAutocompleteTrigger } from '@angular/material'

@ViewChild(MatAutocompleteTrigger) _auto: MatAutocompleteTrigger;

Настройка HostListener для вызова openPanel(), когда он видит событие клавиши ArrowDown.

@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    if (event.key == 'ArrowDown') {
      this._auto.openPanel();
    }
  }

Stackblitz

Вам потребуетсящелкните в белой области под вводом в этом стеке, чтобы сфокусировать документ (не нажимайте / не фокусируйте ввод только на документе), а затем нажмите ArrowDown, чтобы открыть autoComplete

https://stackblitz.com/edit/angular-vtepne?embed=1&file=app/autocomplete-simple-example.ts